/* ===== 展开主播 ===== */
        /* 容器：整块向上收起隐藏 */
        .host-module { width: 100%; position: absolute; z-index: 999; }
        /* 浮动窗：宽度自适应容器，高度由内容撑开 */
        .host-bar { position: relative; width: 100%; padding: 12px 6px 10px 6px; background: #ffffff; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .05); max-height: 120px; overflow: hidden; transition: max-height .35s ease, opacity .3s ease, transform .35s ease, padding .35s ease; }
        .host-module.collapsed .host-bar { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(-16px); }

        /* 卡片行 */
        .host-list { display: flex; gap: 6px; }

        /* 主播卡：3 张时等分铺满，少于 3 张时保持一列宽度、左对齐不撑满 */
        .host-card { position: relative; flex: 1 1 0; max-width: calc((100% - 12px) / 3); min-width: 0; height: 48px; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 4px; border: 0.5px solid #eaeaea; background: #f4f4f4; }
        .host-active { border-color: #ffab99; background: #ffeae5; }

        /* 头像 */
        .host-avatar { position: relative; flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #fff3f0; background: #ffffff; }
        .host-active .host-avatar { border-color: #f44336; }
        /* 直播脉冲：红圈向外扩散渐隐 */
        .host-active .host-avatar::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid #f44336; pointer-events: none; animation: host-live 1.6s ease-out infinite; }
        @keyframes host-live { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
        .host-avatar img { width: 32px; height: 32px; display: block; border-radius: 50%; object-fit: cover; }

        /* 昵称 + 数据 */
        .host-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
        .host-name { font-size: 12px; font-weight: 500; line-height: 14px; color: #141414; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .host-tags { display: flex; gap: 3px; }
        .host-tag { flex: none; height: 16px; padding: 0 6px; border-radius: 100px; font-size: 10px; font-weight: 500; line-height: 16px; white-space: nowrap; }
        .host-tag-main { background: #f44336; color: #ffffff; }
        .host-tag-sub { background: #fff5f7; color: #e53935; }

        /* 热度徽标 */
        .host-hot { position: absolute; top: -8px; right: 0; height: 14px; display: flex; align-items: center; gap: 2px; padding: 0 4px; border-radius: 0 6px 0 6px; background: linear-gradient(to left, #f44336, #e82828); }
        .host-hot img { width: 10px; height: 10px; display: block; }
        .host-hot span { font-size: 10px; font-weight: 400; line-height: 12px; color: #ffffff; }

        /* ===== 收起 ===== */
        .host-fold { position: relative; width: 80px; height: 20px; margin: 0 auto; cursor: pointer; transition: opacity .3s ease, transform .35s ease; }
        .host-fold-bg { position: absolute; left: 0; top: 0; display: flex; width: 80px; height: 20px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .05)); }
        .host-fold-left, .host-fold-right { display: block; width: 18px; height: 20px; }
        .host-fold-mid { width: 44px; height: 20px; background: #ffffff; }
        .host-fold-icon { position: absolute; left: 20px; top: 0; display: block; width: 14px; height: 14px; }
        .host-fold-text { position: absolute; left: 36px; top: 0; font-size: 12px; font-weight: 500; line-height: 14px; color: #8e8e8e; }
        .host-module.collapsed .host-fold { opacity: 0; pointer-events: none; transform: translateY(-16px); }

        /* 外部展开入口 */
        .pull-show { display: flex; align-items: center; gap: 2px; width: 18%; padding: 10px 4px 10px 10px; cursor: pointer; }
        .pull-show a { font-size: 14px; font-weight: 500; color: #f44336; text-decoration: none; }
        .pull-show img { width: 14px; height: 14px; display: block; }


        /* 直播主播列表 */
.live {background: #212121;height: 70px;padding:0;border-radius: 0;display: block;}
.live::after {content:"";clear: both;display: block;}
.urlTitle {
    --main-color: #2bb8ff;
    --main-bg-color: rgba(46,138,213,0.36);
    --pattern-color: rgba(46,138,213,0.07);
    color: var(--main-color);font-size: 12px;font-weight: bold;letter-spacing: 3px;writing-mode: vertical-lr;
    padding: 5px;margin: 0;float: left;
    background: radial-gradient( circle,var(--main-bg-color) 0%,rgba(0,0,0,0) 95% );
    background: radial-gradient( circle,var(--main-bg-color) 0%,rgba(0,0,0,0) 95% ),
      linear-gradient(var(--pattern-color) 1px, transparent 1px),
      linear-gradient(to right, var(--pattern-color) 1px, transparent 1px);
    background-size:cover,15px 15px,15px 15px;
    background-position:center;
    border-right: 1px solid #1c3340;
    /* border-width: 0 1px 0 1px;border-image: radial-gradient( circle,var(--main-color) 0%,rgba(0,0,0,0) 100% ) 1; */
}
/* .urlUl::before {content:"";background: rgba(255,255,255,0.1);width: 1px;height: 76%;left: -10px;top: 50%;transform: translateY(-50%);position: absolute;} */
.urlUl {width:calc(100% - 32px);text-align: left;float:right;position: relative;overflow: scroll;scrollbar-width:none;}
.urlUl ul {display: flex;align-items: center;}
.urlUl li {flex: 0 0 auto;width: 80px;text-align:center;padding:2px 6px 8px 6px;margin:0;display:inline-block;transition:all 0.3s ease;cursor:pointer;}
.urlUl li:hover .zhuboImg {transform:translateY(-2px);}
.urlUl li .zhuboImg + span {color:#fff;font-size:12px;line-height: 18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
.urlUl li .zhuboImg {width: 34px;height:34px;border:2px solid transparent;border-radius: 50%;margin: 4px auto;display: block;transition:all 0.3s ease;}
.urlUl li .zhuboImg img {height:100%;width:auto;border-radius: 50%;object-fit: cover;}
.urlUl li.on {box-shadow: 0 0 20px rgb(0,0,0,0.5);}
.urlUl li.on .zhuboImg {border-color:#3686FB;position: relative;}
.urlUl li.on .zhuboImg .tag {width: max-content;background: #3686FB;color: #fff;font-size: 10px;line-height: normal;padding: 0 6px;border-radius: 20px;left: 50%;bottom: -5px;transform: translateX(-50%);position: absolute;}
.urlUl .liver {display:inline-block;margin-right: 5px;}
.liver .bar {display:inline-block;width:2px;height:5px;background:rgba(255,255,255,.5);border-radius:0px;animation:scale-up4 1s linear infinite;}
.liver .bar:nth-child(2) {height:7px;margin:0 1px;animation-delay:.25s;}
.liver .bar:nth-child(3) {animation-delay:.5s;}
@keyframes scale-up4 {
    20% {background:#fff;transform:scaleY(1.5);vertical-align: 1px;}
    40% {transform:scaleY(1);vertical-align: 0px;}
}