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

/* 页头配色：主播广场偏青，剧社广场偏玫，靠色相区分身份 */
.page-hd.rose{background:
    radial-gradient(680px 340px at 18% -20%, rgba(91,61,245,.16), transparent 64%),
    radial-gradient(520px 320px at 88% 0%, rgba(255,77,109,.11), transparent 62%),
    var(--surface)}

/* ══════════ 双身份引导条 ══════════ */
.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(--rose);   --c-s:var(--rose-soft)}
.guide-c.g2{--c:var(--violet); --c-s:var(--violet-soft)}
@media(max-width:759px){
  .guide-c .gb{display:none}
}

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

.mc{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(--violet); --c-s:var(--violet-soft)}
.mc::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--c),transparent 86%)}
.mc::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)}
.mc:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:transparent}
.mc:hover::after{transform:scale(1.35)}

/* 规模配色 */
.mc.s-large{--c:var(--rose);   --c-s:var(--rose-soft)}
.mc.s-middle{--c:var(--violet); --c-s:var(--violet-soft)}
.mc.s-small{--c:var(--teal);   --c-s:var(--teal-soft)}
.mc.s-none{--c:var(--muted);   --c-s:var(--line-2)}

/* 排名徽标：按维度排序时出现 */
.mc-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))}
.mc-rank.top{background:linear-gradient(135deg,#E8930C,#FFB03A)}
.mc.has-rank{padding-top:30px}

/* 头部 */
.mc-hd{position:relative; display:flex; align-items:center; gap:13px}
.mc-av{width:56px; height:56px; border-radius:17px; flex:none; overflow:hidden;
  background:var(--line-2); box-shadow:0 0 0 3px var(--c-s); display:block}
.mc-av img{width:100%; height:100%; object-fit:cover}
.mc-id{flex:1; min-width:0}
.mc-name{display:block; font-size:17px; font-weight:700; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mc-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.mc-tags em{font-style:normal; font-size:11.5px; font-weight:700;
  padding:2px 9px; border-radius:999px; white-space:nowrap}
.mc-tags .sc{color:var(--c); background:var(--c-s)}
.mc-tags .lv{color:var(--muted); background:var(--line-2); font-family:var(--mono)}

/* 简介：固定两行，长短不一也不会把卡片撑歪 */
.mc-intro{position:relative; margin:14px 0 0; font-size:13.5px; color:var(--ink-2);
  line-height:1.75; min-height:calc(13.5px * 1.75 * 2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word}
.mc-intro.none{color:var(--muted)}

/* 数据格 */
.mc-stats{position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; margin-top:16px}
.mc-stats .s{text-align:center; padding:9px 4px; border-radius:12px;
  background:var(--paper); border:1px solid transparent; transition:.22s var(--ez)}
.mc-stats .s.on{background:var(--c-s); border-color:transparent}
.mc-stats .v{font-size:19px; font-weight:800; line-height:1.2; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.mc-stats .v.sm{font-size:14.5px; font-family:var(--mono); font-weight:700}
.mc-stats .v em{margin-left:1px; font-style:normal; font-size:11.5px;
  font-weight:600; color:var(--muted)}
.mc-stats .s.on .v{color:var(--c)}
.mc-stats .k{margin-top:3px; font-size:11.5px; color:var(--muted)}

/* 底部 */
.mc-ft{position:relative; margin-top:auto; padding-top:16px;
  display:flex; align-items:center; gap:10px}
.mc-ok{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}
.mc-go{margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  font-size:13px; font-weight:700; color:var(--c); white-space:nowrap}
.mc-go i{transition:transform .22s var(--ez)}
.mc:hover .mc-go i{transform:translateX(4px)}