/* ====================================================
   SK直播 主题色 — 玫瑰金/古铜配色 (按新 logo 提取)
   暖色调,金属质感,雅致
   ==================================================== */
:root{
  /* 品牌核心 5 色 */
  --ho-navy:#2A211B;     /* 暖深棕 (头部/页脚) */
  --ho-blue:#B98C5F;     /* 玫瑰金主色 */
  --ho-cyan:#C8A47C;     /* 中铜色 */
  --ho-mint:#D4B896;     /* 浅香槟 */
  --ho-green:#E8D4B8;    /* 米色高光 */

  /* 主色 = 玫瑰金 */
  --color-primary:#B98C5F;
  --color-primary-hover:#8B6F4E;
  --color-primary-light:rgba(185,140,95,.08);
  --color-primary-soft:rgba(185,140,95,.15);

  /* 语义色 (暖色系) */
  --color-live:#C8704C;          /* 直播中 - 暖陶土红 */
  --color-hot:#D4B896;           /* 热门 - 香槟 */
  --color-blue:#B98C5F;
  --color-gold:#C8A47C;
  --color-success:#7B9D6F;       /* 成功 - 鼠尾草绿 */
  --color-warning:#C8A042;       /* 警告 - 琥珀金 */

  /* 文字 - 暖深 */
  --color-text:#2A211B;
  --color-text-secondary:#6B5A4A;
  --color-text-light:#A99F92;

  /* 边框/背景 - 暖白 */
  --color-border:#E8DFD3;
  --color-border-light:#F2EBE0;
  --color-bg:#FAF7F2;
  --color-bg-card:#FFFFFF;
  --color-footer-bg:#1A1410;
  --color-footer-link:#D4B896;
  --color-footer-text:#A99F92;

  /* 品牌渐变 - 玫瑰金扫光 */
  --ho-grad:linear-gradient(90deg,#E8D4B8 0%,#C8A47C 50%,#8B6F4E 100%);
  --ho-grad-rev:linear-gradient(90deg,#8B6F4E 0%,#C8A47C 50%,#E8D4B8 100%);
  --ho-grad-diag:linear-gradient(135deg,#E8D4B8 0%,#C8A47C 50%,#8B6F4E 100%);
  --ho-grad-btn:linear-gradient(135deg,#C8A47C 0%,#B98C5F 100%);
  --ho-grad-btn-hover:linear-gradient(135deg,#8B6F4E 0%,#7A5535 100%);
  --ho-grad-hot:linear-gradient(90deg,#D4B896 0%,#E8D4B8 100%);
  --ho-grad-deep:linear-gradient(135deg,#1A1410 0%,#2A211B 50%,#B98C5F 100%);

  /* 阴影 - 暖调 */
  --shadow-card:0 2px 12px rgba(42,33,27,.06);
  --shadow-card-hover:0 8px 24px rgba(185,140,95,.22);
  --shadow-header:0 1px 12px rgba(42,33,27,.12);
  --shadow-dropdown:0 4px 20px rgba(42,33,27,.14);
}

/* ========== 原站 #f8c21b 黄色 / #fa3434 红色 全局替换 ========== */
[style*='#f8c21b'],[style*='#F8C21B']{background-color:var(--color-primary) !important;color:inherit}

/* ========== 主按钮 / CTA: 蓝青渐变 ========== */
.btn-submit.active,
.btn-primary,
.ant-btn-primary,
.mobile-nav .mobile-auth .btn-m-register,
.match-btn:not(.booked):not(.live-btn){
  background:var(--ho-grad-btn) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(185,140,95,.25);
  transition:all .25s;
}
.btn-submit.active:hover,
.btn-primary:hover,
.ant-btn-primary:hover,
.match-btn:not(.booked):not(.live-btn):hover{
  background:var(--ho-grad-btn-hover) !important;
  box-shadow:0 4px 14px rgba(185,140,95,.4);
  transform:translateY(-1px);
}

/* ========== 菜单 active 态: 渐变胶囊 ========== */
.header-menu>ul>li:hover,
.header-menu>ul>li.active{
  background:var(--ho-grad-btn) !important;
  color:#fff !important;
  border-radius:18px !important;
}

/* ========== 热门 / LIVE 徽章 : 青绿色 ========== */
.tag-item.hot,
.tag-item.gold{
  background:var(--ho-grad-hot) !important;
  color:#2A211B !important;
  font-weight:600;
}
.header-menu>ul>li.download-menu,
.header-menu>ul>li.download-menu:hover{
  background:none !important;
  color:var(--ho-mint) !important;
}

/* ---------- 桌面 平台活动 pill 按钮 (完全重写) ---------- */
.header-menu>ul>li.activity-menu{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:32px !important;
  padding:0 18px !important;
  margin:0 10px !important;
  line-height:1 !important;
  background:var(--ho-grad-btn) !important;
  border-radius:18px !important;
  box-shadow:0 2px 8px rgba(185,140,95,.28) !important;
  overflow:visible !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.header-menu>ul>li.activity-menu:hover{
  background:var(--ho-grad-btn) !important;
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(185,140,95,.4) !important;
}
.header-menu>ul>li.activity-menu>a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  height:auto !important;
  color:#fff !important;
  font-weight:600 !important;
  font-size:14px !important;
  letter-spacing:.5px;
  line-height:1 !important;
  text-decoration:none;
}
/* 屏蔽原 yb5 hot.png (位置乱, 字体歪的元凶), 用纯 CSS 徽章 */
.header-menu>ul>li.activity-menu>img.hot,
.header-menu>ul>li.activity-menu .hot{
  display:none !important;
}
.header-menu>ul>li.activity-menu::after{
  content:HOT;
  position:absolute;
  top:-6px;
  right:-8px;
  padding:1px 5px;
  font-size:9px;
  font-weight:700;
  line-height:1.4;
  color:#fff;
  background:#FF4C4C;
  border-radius:6px;
  box-shadow:0 1px 3px rgba(255,76,76,.5);
  letter-spacing:.5px;
  pointer-events:none;
}
.tag-item.com{
  background:var(--color-primary) !important;
  color:#fff !important;
}

/* ========== LIVE 徽章: 蓝代替红 + 白脉冲 ========== */
.live-badge{
  background:var(--color-primary) !important;
  color:#fff !important;
}
.live-badge .dot-live{background:#fff !important}
.match-btn.live-btn{
  background:var(--color-primary) !important;
  color:#fff !important;
}
.match-btn.live-btn:hover{
  background:var(--color-primary-hover) !important;
}

/* ========== 比分/直播文字: 深海军蓝 (原红) ========== */
.match-score-box .live-score{
  color:var(--color-primary) !important;
}
.match-score-box .match-status-text{
  color:var(--ho-mint) !important;
}
.match-score-box .match-status-text:before{
  background:var(--ho-mint) !important;
}

/* ========== section 标题: 左侧蓝渐变条 + 海军蓝字 ========== */
.section-header .section-title{
  color:var(--ho-navy) !important;
  font-weight:700 !important;
  position:relative;
  padding-left:14px;
}
.section-header .section-title::before{
  content:'';
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:4px; height:22px;
  background:var(--ho-grad-btn);
  border-radius:2px;
}
.section-header .more-link:hover{
  color:var(--color-primary) !important;
}

/* ========== 卡片 hover: 蓝调投影 ========== */
.live-card,.category-card{
  border:1px solid transparent;
  transition:all .25s ease;
}
.live-card:hover,
.category-card:hover{
  border-color:rgba(185,140,95,.25);
  box-shadow:var(--shadow-card-hover) !important;
}

/* ========== 公告栏 ========== */
.announcement-bar{border-color:var(--color-border) !important}
.announcement-bar .ann-label{
  color:#fff !important;
  background:var(--ho-grad-btn);
  border-right:none !important;
}
.announcement-bar .ann-content a:hover{
  color:var(--color-primary) !important;
}

/* ========== 页脚: 海军蓝 + 顶部品牌渐变条 ========== */
.footer-wrapper{
  background:var(--ho-navy) !important;
  position:relative;
}
.footer-wrapper::before{
  content:'';
  display:block;
  height:3px;
  background:var(--ho-grad);
}
.footer-links a{color:#CED4E8 !important}
.footer-links a:hover{color:var(--ho-blue) !important}
.footer-desc{color:#A99F92 !important}

/* ========== 链接 hover 统一 ========== */
a:hover,.link:hover,.more-link:hover,.form-row .link:hover,
.user-dropdown-item:hover,.live-submenu li:hover{
  color:var(--color-primary) !important;
}
.header-search input:focus{
  border-color:var(--color-primary) !important;
}
.header-login:hover,.header-register:hover{
  color:var(--color-primary) !important;
}

/* ========== mobile 底部 tab ========== */
.tab-item.active .tab-icon-on,
.tab-item.active span{
  color:var(--color-primary) !important;
}

/* ========== 表单 focus ========== */
.form-group .input-wrapper:focus-within{
  border-color:var(--color-primary) !important;
  box-shadow:0 0 0 3px var(--color-primary-light);
}
.form-agreement .checkbox.checked{
  background:var(--color-primary) !important;
  border-color:var(--color-primary) !important;
}
.form-group .input-wrapper .btn-verify{
  color:var(--color-primary) !important;
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(185,140,95,.3);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}

/* ========== 首页 hero 播放器 + 侧边列表 (桌面端) ========== */
@media screen and (min-width:769px){
  #heroPlayer{
    position:relative !important;
    overflow:hidden !important;
    border-radius:12px !important;
    background:#000 !important;
    box-shadow:0 4px 20px rgba(42,33,27,.15);
  }
  .room-list{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
  }
  .room-list .room-item a{
    position:relative;
    display:block;
    border-radius:8px;
    overflow:hidden;
    border:2px solid transparent;
    transition:border-color .2s, transform .15s;
    cursor:pointer;
  }
  .room-list .room-item a:hover{
    border-color:rgba(200,164,124,.4);
    transform:translateX(-3px);
  }
  .room-list .room-item a.active{
    border-color:var(--color-primary) !important;
    box-shadow:0 0 0 1px var(--color-primary);
  }
  .room-list .room-item a.active .left-arrow{
    position:absolute;
    left:0; top:50%;
    transform:translate(-100%,-50%);
    width:0; height:0;
    border-left:8px solid var(--color-primary);
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
  }
  .room-list .room-item img{
    width:100%; height:100%; object-fit:cover;
    display:block;
  }
  .room-list .room-item .room-item-name{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:6px 8px 4px;
    color:#fff;
    font-size:11px;
    background:linear-gradient(to top, rgba(0,0,0,.7), transparent);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* Hero 进入按钮 - 完全脱离老 .enter-room CSS, 固定右下角 */
  .hero-enter-btn{
    position:absolute !important;
    right:20px !important;
    bottom:20px !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    display:inline-flex !important;
    align-items:center !important;
    height:40px !important;
    line-height:1 !important;
    padding:0 20px !important;
    background:linear-gradient(135deg,#C8A47C,#B98C5F) !important;
    color:#fff !important;
    border:none !important;
    border-radius:20px !important;
    font-size:14px !important;
    font-weight:600 !important;
    text-decoration:none !important;
    cursor:pointer !important;
    box-shadow:0 4px 14px rgba(185,140,95,.42) !important;
    opacity:1 !important;
    z-index:5 !important;
    transition:transform .15s ease, box-shadow .15s ease !important;
    letter-spacing:.3px;
  }
  .hero-enter-btn:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 6px 20px rgba(185,140,95,.6) !important;
    background:linear-gradient(135deg,#D4B896,#C8A47C) !important;
  }
  .hero-enter-btn:active{
    transform:translateY(0) !important;
    box-shadow:0 2px 8px rgba(185,140,95,.35) !important;
  }
}

/* ========== 全局头像保护 (桌面+手机都有效) ========== */
.anchor-avatar,
.anchor-card .anchor-avatar,
.user-avatar{
  border-radius:50% !important;
  aspect-ratio:1 / 1 !important;
  overflow:hidden !important;
  background:#F2EBE0;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.anchor-avatar > img,
.anchor-card .anchor-avatar > img,
.user-avatar > img{
  width:100% !important;
  height:100% !important;
  border-radius:50% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}
img.head-img,img.avatar-img,img.user-avatar,
.live-room img.head-img{
  border-radius:50% !important;
  object-fit:cover !important;
  aspect-ratio:1 / 1 !important;
  display:block !important;
}

/* ========== 手机端 banner: 动态封面 + 标题/LIVE 叠加 ========== */
@media screen and (max-width:768px){
  .mobile-banner{
    margin:10px 12px 14px !important;
    border-radius:14px !important;
    overflow:hidden !important;
    box-shadow:0 4px 16px rgba(42,33,27,.18) !important;
  }
  .mobile-banner-inner,
  .banner-swiper-container,
  .mobile-banner .swiper-wrapper,
  .mobile-banner .swiper-slide{
    height:200px !important;
    border-radius:14px !important;
    overflow:hidden !important;
  }
  .mb-slide-wrap{
    position:relative !important;
    width:100% !important; height:100% !important;
    background:#000 !important;
    border-radius:14px !important;
    overflow:hidden !important;
    isolation:isolate;          /* 建独立 stacking context */
    display:block !important;
  }
  .mb-slide-wrap > video,
  .mb-slide-wrap > img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important; height:100% !important;
    object-fit:cover !important;
    z-index:1 !important;
    display:block !important;
  }
  .mb-live-badge{
    position:absolute !important;
    top:10px; left:10px;
    z-index:10 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    height:24px;
    padding:0 10px;
    background:rgba(200,112,76,.95) !important;
    color:#fff !important;
    font-size:11px !important;
    font-weight:700 !important;
    border-radius:12px !important;
    letter-spacing:.5px !important;
    box-shadow:0 2px 6px rgba(0,0,0,.4) !important;
  }
  .mb-live-badge .dot{
    width:6px !important; height:6px !important;
    border-radius:50% !important;
    background:#fff !important;
    box-shadow:0 0 0 0 rgba(255,255,255,.7);
    animation:hoLivePulse 1.6s infinite;
  }
  .mb-title-overlay{
    position:absolute !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    z-index:9 !important;
    padding:50px 14px 14px !important;
    background:linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,.3) 75%, transparent 100%) !important;
    pointer-events:none !important;
  }
  .mb-title-text{
    color:#fff !important;
    font-size:15px !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    text-shadow:0 2px 6px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.5) !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    margin:0 !important;
    word-break:break-word;
  }
  /* 防止 swiper-slide 里的 a 把字体颜色搞掉 */
  .mobile-banner .swiper-slide a,
  .mobile-banner .swiper-slide a:visited,
  .mobile-banner .swiper-slide a:hover{
    color:#fff !important;
    text-decoration:none !important;
    display:block !important;
    width:100% !important; height:100% !important;
    position:relative !important;
  }
  .mobile-banner .swiper-pagination{
    bottom:8px !important;
  }
  .mobile-banner .swiper-pagination-bullet{
    background:rgba(255,255,255,.5) !important;
    opacity:1 !important;
  }
  .mobile-banner .swiper-pagination-bullet-active{
    background:var(--color-primary) !important;
    width:18px !important;
    border-radius:4px !important;
    transition:width .2s !important;
  }
}

/* ========== 手机端 — 雅致暖色调 ========== */
@media screen and (max-width:768px){
  /* —— Header (永久暗暖, 无透明态切换) —— */
  body{background:var(--color-bg) !important}
  .header-wrapper,
  .header-wrapper.solid,
  .header-wrapper:not(.solid){
    background:linear-gradient(135deg,#1A1410 0%,#2A211B 100%) !important;
    border-bottom:1px solid rgba(200,164,124,.15) !important;
    box-shadow:0 2px 12px rgba(42,33,27,.18) !important;
    /* 防止 iOS 地址栏隐藏时的视口抖动: 用 transform 触发硬件加速合成层 */
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    will-change:auto;
    /* 平滑过渡, 但只在 bg/box-shadow 上, 不在 height/padding */
    transition:background-color .2s ease, box-shadow .2s ease !important;
    /* 防止极少数情况下高度被外层 flex 拉伸 */
    height:54px !important;
    /* 强制 fixed 定位 + 始终顶部 */
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
    z-index:9999 !important;
  }
  .header-wrapper.solid .header-menu>ul>li,
  .header-wrapper .header-menu>ul>li{color:#F5E9D6 !important}
  .header-inner{
    width:100% !important;
    max-width:100% !important;
    padding:0 14px !important;
    height:54px !important;
    display:flex !important;
    align-items:center !important;
  }
  /* —— Logo: 完整显示, 不裁剪, 不加 drop-shadow (会与 logo 自身的金属高光叠加成虚影) —— */
  .header-logo-box{
    width:auto !important;
    margin-right:0 !important;
    display:flex !important;
    align-items:center !important;
    height:54px !important;
    flex-shrink:0 !important;
  }
  /* 强制只显示一个 logo (header-logo-active), 隐藏另一个避免重叠虚影 */
  .header-logo{display:none !important; visibility:hidden !important;}
  .header-logo-active{
    display:inline-block !important;
    height:36px !important;
    width:auto !important;
    max-width:140px !important;
    object-fit:contain !important;
    margin:0 !important;
    vertical-align:middle !important;
  }
  .header-wrapper:not(.solid) .header-logo-active{display:inline-block !important;}
  /* —— 移动菜单图标 —— */
  .mobile-menu-toggle span{
    background:#E8D4B8 !important;
  }
  /* —— 卡片: 雅致暖光阴影 (不动 anchor-card 因为它是无背景的圆头像组件) —— */
  .live-card,.category-card,.match-card{
    background:var(--color-bg-card) !important;
    border-radius:14px !important;
    border:1px solid var(--color-border-light) !important;
    box-shadow:0 2px 10px rgba(42,33,27,.06) !important;
    overflow:hidden;
  }
  .live-card:active,.match-card:active{
    transform:scale(.98);
    box-shadow:0 4px 18px rgba(185,140,95,.18) !important;
  }
  /* —— 头像永远是圆 + cover (容器强制方形, 内部 img 100%铺满) —— */
  .anchor-avatar,
  .anchor-card .anchor-avatar,
  .user-avatar,
  .head-img-wrap{
    border-radius:50% !important;
    aspect-ratio:1 / 1 !important;
    overflow:hidden !important;
    background:#F2EBE0 !important;
  }
  /* 容器内的 img 必须填满容器并裁切, 不可拉伸 */
  .anchor-avatar img,
  .anchor-card .anchor-avatar img,
  .user-avatar img,
  .head-img-wrap img{
    width:100% !important;
    height:100% !important;
    border-radius:50% !important;
    object-fit:cover !important;
    object-position:center center !important;
    display:block !important;
  }
  /* head-img / avatar-img 自身就是 img 元素 */
  .head-img,.avatar-img,
  .live-room .head-img,
  img.head-img,img.avatar-img,img.user-avatar{
    border-radius:50% !important;
    object-fit:cover !important;
    aspect-ratio:1 / 1 !important;
    display:block !important;
  }
  .anchor-card{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  .anchor-card .anchor-avatar{
    width:72px !important;
    height:72px !important;
    border:2px solid var(--color-border-light) !important;
    transition:border-color .25s ease, transform .25s ease !important;
    margin:0 auto 8px !important;
  }
  .anchor-card:active .anchor-avatar{
    border-color:var(--color-primary) !important;
    transform:scale(.97);
  }
  .anchor-card .anchor-name{
    font-size:12px !important;
    color:var(--color-text-secondary) !important;
    margin-top:8px !important;
  }
  /* —— 主按钮: 玫瑰金渐变, 大圆角 —— */
  .btn-primary,.ant-btn-primary,
  .mobile-nav .mobile-auth .btn-m-register{
    background:var(--ho-grad-btn) !important;
    border:none !important;
    color:#fff !important;
    border-radius:12px !important;
    font-weight:600 !important;
    box-shadow:0 4px 14px rgba(185,140,95,.32) !important;
  }
  /* —— 页脚 logo —— */
  .footer-logo{height:48px !important}
  /* —— 标题字号 —— */
  .section-header .section-title{
    font-size:17px !important;
    letter-spacing:.3px;
  }
  /* —— 底部 tab bar: 暖深 + 玫瑰金 active —— */
  .mobile-tabbar{
    background:linear-gradient(180deg,#2A211B 0%,#1A1410 100%) !important;
    border-top:1px solid rgba(200,164,124,.18) !important;
    box-shadow:0 -2px 12px rgba(42,33,27,.25) !important;
  }
  .mobile-tabbar .tab-item{color:#A99F92 !important}
  .mobile-tabbar .tab-item.active{color:var(--ho-cyan) !important}
  /* —— 直播间页面: 顶部主播条 —— */
  .live-room .top-block{
    background:linear-gradient(135deg,#2A211B 0%,#1A1410 100%) !important;
  }
  .live-room .text-title{color:#F5E9D6 !important}
  .live-room .nick-name,
  .live-room .room-num,
  .live-room .view-num{color:#D4B896 !important}
  /* —— 聊天面板 —— */
  .chat .notice{
    background:linear-gradient(90deg,rgba(200,164,124,.12) 0%,transparent 100%) !important;
    border-left:3px solid var(--color-primary) !important;
  }
  .chat .tab-item.tab-active{
    color:var(--color-primary) !important;
    border-bottom-color:var(--color-primary) !important;
  }
  /* —— 聊天输入框 —— */
  .chat-input,.chat-form input{
    border:1px solid var(--color-border) !important;
    background:#FAF7F2 !important;
    border-radius:20px !important;
  }
  /* —— 圆角统一 —— */
  .btn,.btn-sm{border-radius:10px !important}
}

  /* —— Header 右侧"直播中 N" 胶囊 —— */
  .header-right{
    display:flex !important;
    align-items:center !important;
    margin-left:auto !important;
  }
  .header-live-pill{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    height:30px;
    padding:0 12px;
    background:linear-gradient(135deg,rgba(200,164,124,.18) 0%,rgba(185,140,95,.28) 100%);
    border:1px solid rgba(200,164,124,.35);
    border-radius:15px;
    font-size:12px;
    font-weight:600;
    color:#F5E9D6 !important;
    text-decoration:none !important;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
  }
  .header-live-pill .dot{
    width:7px; height:7px;
    border-radius:50%;
    background:#C8704C;
    box-shadow:0 0 0 0 rgba(200,112,76,.7);
    animation:hoLivePulse 1.6s infinite;
  }
  .header-live-pill .lbl{font-size:11px;letter-spacing:.5px;opacity:.85}
  @keyframes hoLivePulse{
    0%{box-shadow:0 0 0 0 rgba(200,112,76,.7)}
    70%{box-shadow:0 0 0 8px rgba(200,112,76,0)}
    100%{box-shadow:0 0 0 0 rgba(200,112,76,0)}
  }
}

/* ========== <=375 (iPhone SE 等小屏) ========== */
@media screen and (max-width:375px){
  .header-logo-active{height:32px !important;max-width:130px !important}
  .header-inner{padding:0 10px !important;height:50px !important}
  .header-logo-box{height:50px !important}
  .section-header .section-title{font-size:15px !important}
}

/* ========== 主播头像 hover: 渐变环 ========== */
.anchor-card:hover .anchor-avatar{
  border-color:var(--ho-blue) !important;
  box-shadow:0 0 0 2px rgba(185,140,95,.2);
}

/* ========== 首页透明 header: 海军蓝半透 ========== */
.header-wrapper:not(.solid){
  background:transparent !important;
}
.header-wrapper.solid{
  background:#fff !important;
  box-shadow:var(--shadow-header) !important;
  color:var(--ho-navy) !important;
}
.header-wrapper.solid .header-menu>ul>li{color:var(--ho-navy) !important}
.header-wrapper.solid .header-menu>ul>li:hover,
.header-wrapper.solid .header-menu>ul>li.active{color:#fff !important}

/* ========== 右侧悬浮按钮 ========== */
.right-fix .icon-team a:hover{
  color:var(--color-primary) !important;
  border-color:var(--color-primary) !important;
}

/* ========== 强制把任何残留的黄/金替换 ========== */
[class*='warning'],
[class*='primary-btn'][style*='yellow']{
  background:var(--color-primary) !important;
}

/* ====================================================
   手机端专属色调 (≤768px)
   ==================================================== */
@media screen and (max-width:768px){

  /* ---- 整体文字 / 背景 ---- */
  body{
    background:var(--color-bg) !important;
    color:var(--ho-navy) !important;
  }

  /* ---- 顶部 header (手机版) ---- */
  .header-wrapper.solid{background:#fff !important}
  .header-wrapper:not(.solid){
    background:transparent !important;
  }

  /* ---- hamburger 三道线 ---- */
  .mobile-menu-toggle span{background:#fff !important}
  .header-wrapper.solid .mobile-menu-toggle span{background:var(--ho-navy) !important}

  /* ---- mobile 右上 平台活动 pill (重写, 修 歪歪扭扭 文字) ---- */
  .mobile-download-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:28px !important;
    padding:0 14px !important;
    margin:0 !important;
    font-size:12px !important;
    font-weight:600 !important;
    line-height:1 !important;
    letter-spacing:.3px;
    color:#fff !important;
    background:var(--ho-grad-btn) !important;
    border:none !important;
    border-radius:14px !important;
    box-shadow:0 2px 6px rgba(185,140,95,.3) !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    vertical-align:middle !important;
    transition:transform .18s ease, box-shadow .18s ease !important;
  }
  .mobile-download-btn:active{
    transform:scale(.95);
    box-shadow:0 1px 3px rgba(185,140,95,.35) !important;
  }

  /* ---- 抽屉式 mobile-nav ---- */
  .mobile-nav{background:#fff !important}
  .mobile-nav li{border-bottom-color:var(--color-border-light) !important}
  .mobile-nav li a{color:var(--ho-navy) !important;font-weight:500}
  .mobile-nav li.active{
    background:var(--color-primary-light) !important;
    border-radius:8px !important;
    padding-left:12px !important;
  }
  .mobile-nav li.active a{color:var(--color-primary) !important;font-weight:700}

  /* ---- 抽屉底部登录/注册按钮 ---- */
  .mobile-nav .mobile-auth .btn-m-login{
    border:1px solid var(--color-primary) !important;
    color:var(--color-primary) !important;
    border-radius:24px !important;
    font-weight:600;
  }
  .mobile-nav .mobile-auth .btn-m-login:active{
    background:var(--color-primary-light) !important;
  }
  .mobile-nav .mobile-auth .btn-m-register{
    background:var(--ho-grad-btn) !important;
    color:#fff !important;
    border-radius:24px !important;
    font-weight:600;
    box-shadow:0 3px 10px rgba(185,140,95,.35);
  }

  /* ---- 底部 tab bar ---- */
  .tab-item{color:var(--color-text-light) !important}
  .tab-item span{color:var(--color-text-light) !important}
  .tab-item.active{color:var(--color-primary) !important}
  .tab-item.active span{
    color:var(--color-primary) !important;
    font-weight:600 !important;
  }
  /* tab 栏整体底色 + 上边框 */
  .tab-bar,.footer-tab,nav.tab-nav,.mobile-tab-bar{
    background:#fff !important;
    border-top:1px solid var(--color-border) !important;
    box-shadow:0 -2px 10px rgba(42,33,27,.06) !important;
  }

  /* ---- mobile 分类 nav tabs ---- */
  .mobile-nav-header{
    background:linear-gradient(180deg,#fff 0%,var(--color-bg) 100%) !important;
  }
  .mobile-nav-tabs{display:flex;overflow-x:auto}
  .mobile-nav-tabs .tab,
  .mobile-nav-tabs>a,
  .mobile-nav-tabs>div{
    color:var(--color-text-secondary) !important;
    font-weight:500;
  }
  .mobile-nav-tabs .tab.active,
  .mobile-nav-tabs>a.active,
  .mobile-nav-tabs>div.active{
    color:var(--color-primary) !important;
    font-weight:700 !important;
    position:relative;
  }
  .mobile-nav-tabs .tab.active::after,
  .mobile-nav-tabs>a.active::after,
  .mobile-nav-tabs>div.active::after{
    content:'';
    position:absolute;
    bottom:-2px;left:20%;right:20%;
    height:3px;
    background:var(--ho-grad-btn);
    border-radius:2px;
  }

  /* ---- mobile banner 圆点指示器 ---- */
  .swiper-pagination-bullet-active,
  .banner-dot.active{background:var(--color-primary) !important}
  .swiper-pagination-bullet{background:rgba(185,140,95,.35) !important}

  /* ---- 直播卡片手机态 ---- */
  .live-card{
    border-radius:12px !important;
    overflow:hidden;
  }
  .live-card .card-title{
    color:var(--ho-navy) !important;
    font-weight:600 !important;
  }
  .card-bottom-info{
    background:linear-gradient(transparent,rgba(42,33,27,.85)) !important;
  }

  /* ---- 赛程比分卡片 ---- */
  .match-card{
    background:#fff;
    border:1px solid var(--color-border-light) !important;
    border-right:1px solid var(--color-border-light) !important;
    border-radius:10px !important;
    margin-right:10px;
  }
  .team-name{color:var(--ho-navy) !important}
  .match-header{color:var(--color-text-light) !important}

  /* ---- 主播卡片 ---- */
  .anchor-card .anchor-name{color:var(--ho-navy) !important;font-weight:500}

  /* ---- 模态框 bottom-sheet 样式 ---- */
  .modal{
    border-radius:20px 20px 0 0 !important;
    background:#fff !important;
  }
  .modal-title{
    color:var(--ho-navy) !important;
    font-weight:700 !important;
  }
  .btn-submit.active{
    background:var(--ho-grad-btn) !important;
    border-radius:24px !important;
    height:48px !important;
  }

  /* ---- 输入框 focus 在手机上加粗高光 ---- */
  .form-group .input-wrapper:focus-within{
    border-color:var(--color-primary) !important;
    box-shadow:0 0 0 3px var(--color-primary-soft) !important;
  }

  /* ---- 右侧悬浮按钮 (mobile 隐藏或缩小) ---- */
  .right-fix{display:none !important}

  /* ---- 提交按钮 tap 态 ---- */
  .btn-submit:active,
  .btn-primary:active,
  .mobile-nav .mobile-auth .btn-m-register:active{
    transform:scale(.97);
    opacity:.9;
  }

  /* ---- 页脚链接在 mobile 上更紧凑 ---- */
  .footer-links a{font-size:13px !important;color:#BCC4DC !important}
  .footer-links a:hover,
  .footer-links a:active{color:var(--ho-blue) !important}

  /* ---- section 之间的间距 ---- */
  .section-header{padding:0 14px !important}
  .section-header .section-title::before{
    height:18px !important;
    width:3px !important;
  }
}

/* ====================================================
   极窄屏 (≤375px) 微调
   ==================================================== */
@media screen and (max-width:375px){
  .header-logo-active{height:34px !important}
  .mobile-download-btn{height:26px !important;padding:0 12px !important;font-size:11px !important;border-radius:13px !important}
  .section-header .section-title{font-size:16px !important}
}

/* ====================================================
   直播间播放器加载动画 — 简约纯 CSS
   (零新 DOM, 在原 .player-loading 上重绘)
   ==================================================== */
.player-loading{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:10;
  background:transparent !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  pointer-events:none;
}
/* 隐藏旧 yb5 的黄圈 spinner */
.player-loading .loading-spin{display:none !important}

/* 中央 logo: 脉动 + 包在一个 96×96 容器里 */
.player-loading .loading-logo{
  position:relative !important;
  width:56px !important;
  height:56px !important;
  object-fit:contain;
  padding:0 !important;
  margin:0 !important;
  animation:ho-loader-breathe 2s ease-in-out infinite;
  filter:drop-shadow(0 2px 8px rgba(185,140,95,.4));
  z-index:2;
  top:auto !important;
  left:auto !important;
}

/* 旋转渐变弧 — 用 ::before 画在 player-loading 上,圆点对齐 logo */
.player-loading::before{
  content:'';
  position:absolute;
  top:calc(50% - 52px);
  left:50%;
  transform:translateX(-50%);
  width:96px;
  height:96px;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0%,
    rgba(185,140,95,.0) 15%,
    #B98C5F 40%,
    #C8A47C 65%,
    #D4B896 90%,
    transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:ho-loader-spin 1.2s linear infinite;
  z-index:1;
}

/* 外圈微光 (pulse 扩散) */
.player-loading::after{
  content:'';
  position:absolute;
  top:calc(50% - 52px);
  left:50%;
  transform:translateX(-50%);
  width:96px;
  height:96px;
  border-radius:50%;
  border:1px solid rgba(185,140,95,.15);
  animation:ho-loader-pulse 1.6s ease-out infinite;
  z-index:0;
}

/* 文字 */
.player-loading p{
  margin:88px 0 0 !important;
  font-size:13px !important;
  font-weight:500;
  letter-spacing:1px;
  background:linear-gradient(90deg,#B98C5F,#C8A47C,#D4B896);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent !important;
  animation:ho-loader-text 2s ease-in-out infinite;
}

@keyframes ho-loader-spin{
  to{transform:translateX(-50%) rotate(360deg)}
}
@keyframes ho-loader-breathe{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.92);opacity:.75}
}
@keyframes ho-loader-pulse{
  0%{transform:translateX(-50%) scale(.9);opacity:.7}
  100%{transform:translateX(-50%) scale(1.3);opacity:0}
}
@keyframes ho-loader-text{
  0%,100%{opacity:1}
  50%{opacity:.55}
}

/* 手机端稍小 */
@media screen and (max-width:768px){
  .player-loading .loading-logo{width:44px !important;height:44px !important}
  .player-loading::before,
  .player-loading::after{width:76px;height:76px;top:calc(50% - 42px)}
  .player-loading p{margin-top:68px !important;font-size:12px !important}
}

/* ====================================================
   v=ho7: 手机端顶部栏滚动动画 + 隐藏分类 nav + 底部 tabbar
   ==================================================== */

/* ---- 原 yb5 的 mobile-nav-header 分类条 (推荐/足球/篮球...) 用户要求完全隐藏 ---- */
.mobile-nav-header,
#mobileNavHeader,
body[data-page=index] .mobile-nav-header,
body[data-page=live] .mobile-nav-header,
body[data-page=schedule] .mobile-nav-header,
body[data-page=user] .mobile-nav-header{
  display:none !important;
}

/* ---- mobile 顶部栏: 透明 → 实心 平滑过渡 ---- */
@media screen and (max-width:768px){
  .header-wrapper{
    transition:background .3s ease, box-shadow .3s ease, color .3s ease !important;
  }
  /* 滑到顶部时: 透明 (叠在 banner/轮播之上) */
  .header-wrapper:not(.solid){
    background:transparent !important;
    box-shadow:none !important;
    color:#fff !important;
  }
  .header-wrapper:not(.solid) .header-left,
  .header-wrapper:not(.solid) .header-right,
  .header-wrapper:not(.solid) .mobile-menu-toggle span{color:#fff !important}
  .header-wrapper:not(.solid) .mobile-menu-toggle span{background:#fff !important}

  /* 滚动后实心: 白底 + logo 色文字 + 柔和下阴影 */
  .header-wrapper.solid{
    background:#fff !important;
    box-shadow:0 2px 12px rgba(42,33,27,.08) !important;
    color:var(--ho-navy) !important;
  }
  .header-wrapper.solid .header-left{color:var(--ho-navy) !important}
  .header-wrapper.solid .mobile-menu-toggle span{background:var(--ho-navy) !important}
}

/* ---- 底部 mobile-tabbar: logo 色调 ---- */
.mobile-tabbar{
  background:#fff !important;
  border-top:1px solid var(--color-border) !important;
  box-shadow:0 -2px 12px rgba(42,33,27,.06) !important;
}
.mobile-tabbar .tab-item{
  color:var(--color-text-light) !important;
  position:relative;
  transition:color .2s ease !important;
}
.mobile-tabbar .tab-item span{color:inherit !important}
.mobile-tabbar .tab-item.active{
  color:var(--ho-blue) !important;
  font-weight:600 !important;
}
/* active 顶部渐变指示条 */
.mobile-tabbar .tab-item.active::before{
  content:;
  position:absolute;
  left:50%;
  top:3px;
  transform:translateX(-50%);
  width:24px;
  height:3px;
  border-radius:2px;
  background:var(--ho-grad-btn);
  box-shadow:0 1px 4px rgba(185,140,95,.35);
}
/* 覆盖 yb5 原黄色下划线 (tab-active 另一种 class) */
.tab-item.tab-active{
  color:var(--ho-blue) !important;
  border-bottom-color:var(--ho-blue) !important;
}
.mobile-tabbar .tab-item:active{opacity:.65 !important}

/* ====================================================
   v=ho10: 手机端首屏 mobile-banner (swiper 大横幅) 拉高 + logo 色分页圆点
   修正: 上一轮误改了 .hot-grid 直播卡, 已撤回
   ==================================================== */
@media screen and (max-width:768px){

  /* 横幅容器整体: 141px -> 180px, 圆角 + 柔阴影, 上下留呼吸 */
  .mobile-banner{
    display:block !important;
    height:180px !important;
    margin:12px 14px 18px !important;
    border-radius:12px !important;
    overflow:hidden !important;
    box-shadow:0 4px 14px rgba(42,33,27,.1) !important;
  }
  .mobile-banner-inner,
  .mobile-banner-inner .swiper-slide,
  .mobile-banner-inner .swiper-slide a,
  .mobile-banner-inner img{
    border-radius:12px !important;
  }
  /* 内部图片吃满高度 */
  .mobile-banner-inner{height:100% !important}
  .mobile-banner-inner .swiper-slide{height:100% !important}
  .mobile-banner-inner img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block;
  }

  /* 分页圆点: 从 yb5 黄 #ffc71c 改成 logo 蓝→绿渐变胶囊 */
  .mobile-banner-pagination{
    text-align:right !important;
    padding-right:12px;
    bottom:10px !important;
  }
  .mobile-banner-pagination .swiper-pagination-bullet{
    width:6px !important;
    height:6px !important;
    background:rgba(255,255,255,.55) !important;
    opacity:1 !important;
    margin:0 4px !important;
    border-radius:3px !important;
    transition:width .25s ease, background .25s ease;
  }
  .mobile-banner-pagination .swiper-pagination-bullet-active{
    width:18px !important;
    height:6px !important;
    background:var(--ho-grad-btn) !important;
    border-radius:3px !important;
    box-shadow:0 1px 3px rgba(185,140,95,.4);
  }
}

/* 极窄屏 (≤375): 横幅再收一点, 但依然比原版高 */
@media screen and (max-width:375px){
  .mobile-banner{height:160px !important;margin:10px 12px 16px !important}
}

/* ====================================================
   v=ho11: 电脑端 .living-room 锁死原静态 banner.jpg
   (JS 会把 #living-room 的 inline background-image 改成直播封面,
    用 CSS !important 覆盖 inline style — 桌面端永远显示原底图)
   ==================================================== */
@media screen and (min-width:769px){
  #living-room,
  .living-room{
    background-image:url('/img/banner.jpg') !important;
    background-position:center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
  }
}

/* ====================================================
   手机端 UI 强化 (SK直播 2026-04-28) — 保留布局规则
   注意: header / logo 相关由文件上方主块统一管理, 这里不再重复
   ==================================================== */
@media screen and (max-width:768px){
  /* --- 页面整体暖色渐变底 --- */
  body{
    background:
      radial-gradient(circle at 12% -10%, rgba(185,140,95,.10), transparent 45%),
      radial-gradient(circle at 92% 8%, rgba(248,194,27,.08), transparent 40%),
      var(--color-bg) !important;
    min-height:100vh;
  }

  /* --- 正在热播: 双列网格, 卡片更紧凑更饱满 --- */
  .hot-grid{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
    padding:0 12px !important;
  }
  .hot-section{padding:0 !important; margin-bottom:18px}
  .live-card{
    background:#fff !important;
    box-shadow:0 2px 10px rgba(42,33,27,.06) !important;
    border-radius:12px !important;
  }
  .live-card .card-cover{aspect-ratio:16/10; position:relative}
  .live-card .card-cover img,
  .live-card .card-cover .cover-placeholder{
    width:100%; height:100%; object-fit:cover;
  }
  .live-card .card-title{
    padding:8px 10px !important;
    font-size:13px !important;
    line-height:1.3 !important;
    color:var(--ho-navy) !important;
    font-weight:600 !important;
  }

  /* --- 正在热播 section-header: 左竖条 + 加粗 --- */
  .hot-section .section-header{
    padding:18px 14px 12px !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    position:relative !important;
  }
  .hot-section .section-header::before{
    content:"" !important;
    width:4px !important; height:20px !important;
    background:var(--ho-grad-btn) !important;
    border-radius:2px !important;
    margin-right:8px !important;
  }
  .hot-live-text{
    font-size:17px !important;
    font-weight:700 !important;
    color:var(--ho-navy) !important;
    vertical-align:middle !important;
  }
  .hot-live-icon{display:none !important}

  /* --- 热门主播: 可横向滑动, 避免挤在一起 --- */
  .anchor-section{padding:0 12px !important; margin-bottom:20px}
  .anchor-title-banner{margin-bottom:10px !important}
  .anchor-slider{
    display:flex !important;
    gap:14px !important;
    overflow-x:auto !important;
    padding:4px 2px 10px !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch;
  }
  .anchor-slider::-webkit-scrollbar{display:none}
  .anchor-slider .anchor-card{
    scroll-snap-align:start;
    flex-shrink:0;
    width:96px !important;
  }
  .anchor-slider .anchor-avatar{
    width:66px !important; height:66px !important;
    border-radius:50% !important;
    border:2px solid rgba(185,140,95,.25) !important;
    box-shadow:0 2px 8px rgba(185,140,95,.15) !important;
  }

  /* --- 正在热播空态友好提示 --- */
  .hot-grid:empty::after{
    content:"暂无正在直播的房间, 稍后再看看";
    display:block;
    grid-column:1/-1;
    text-align:center;
    padding:40px 14px;
    color:var(--color-text-light);
    font-size:13px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(42,33,27,.04);
  }

  /* --- 主内容器边距收紧, 视觉更聚焦 --- */
  .inner{width:100% !important; max-width:100% !important; padding:0 !important}
}

/* ====================================================
   手机端补丁: 覆盖 responsive.min.css 的老布局
   (.hot-grid .live-card {width:50%; float:left} 会让 grid 子元素瘪成半宽)
   ==================================================== */
@media screen and (max-width:768px){
  .hot-grid .live-card,
  .hot-grid .live-card:nth-child(odd),
  .hot-grid .live-card:nth-child(even){
    width:auto !important;
    float:none !important;
    padding:0 !important;
    margin-bottom:0 !important;
    box-shadow:0 2px 10px rgba(42,33,27,.06) !important;
    border-radius:12px !important;
    overflow:hidden !important;
  }
  .hot-grid .live-card .card-cover{
    aspect-ratio:16/10 !important;
    height:auto !important;
    float:none !important;
    width:100% !important;
    border-radius:12px 12px 0 0 !important;
  }
  .hot-grid .live-card .card-title{
    height:auto !important;
    line-height:1.3 !important;
    padding:8px 10px !important;
    font-size:13px !important;
  }
}

/* ====================================================
   手机端: 展示 热门主播 / 分类 (覆盖 responsive.min.css
   对这两个 section 的 display:none, 减少空白感)
   ==================================================== */
@media screen and (max-width:768px){
  .anchor-section,
  .category-section{
    display:block !important;
  }

  /* 用文字 section-header 替代 hot-zb.png 桌面横幅 */
  .anchor-title-banner{
    display:block !important;
    padding:18px 14px 10px !important;
    position:relative !important;
    margin:0 !important;
  }
  .anchor-title-banner img{display:none !important}
  .anchor-title-banner::before{
    content:'热门主播';
    display:inline-block;
    padding-left:12px;
    font-size:17px;
    font-weight:700;
    color:var(--ho-navy);
    line-height:20px;
    position:relative;
  }
  .anchor-title-banner::after{
    content:'';
    position:absolute;
    left:14px; top:20px;
    width:4px; height:20px;
    background:var(--ho-grad-btn);
    border-radius:2px;
  }

  /* 分类区 section-header (分类区内部每块自带 section-header) */
  .category-section .category-block{
    padding:0 12px !important;
    margin-bottom:18px !important;
  }
  .category-section .section-header{
    padding:14px 0 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    position:relative !important;
  }
  .category-section .section-title{
    font-size:17px !important;
    font-weight:700 !important;
    color:var(--ho-navy) !important;
    padding-left:12px !important;
    position:relative !important;
  }
  .category-section .section-title::before{
    content:'';
    position:absolute;
    left:0; top:2px;
    width:4px; height:18px;
    background:var(--ho-grad-btn);
    border-radius:2px;
  }
  .category-section .section-title img{
    height:22px !important;
    vertical-align:middle !important;
  }
  .category-section .more-link{
    font-size:12px !important;
    color:var(--color-text-light) !important;
  }

  /* 分类卡片网格: 双列, 跟热播同风格 */
  .category-section .category-grid{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
  .category-section .category-card{
    background:#fff !important;
    border-radius:12px !important;
    box-shadow:0 2px 10px rgba(42,33,27,.06) !important;
    overflow:hidden !important;
  }
  .category-section .cat-cover{
    position:relative;
    aspect-ratio:16/10;
    background:linear-gradient(135deg,#e8f3fa,#f4f6fa);
  }
  .category-section .cat-cover img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }
  .category-section .cat-title{
    padding:8px 10px 4px !important;
    font-size:13px !important;
    font-weight:600 !important;
    color:var(--ho-navy) !important;
    line-height:1.3 !important;
  }
  .category-section h6{
    padding:0 10px 8px !important;
    font-size:12px !important;
    color:var(--color-text-light) !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
  }
  .category-section h6 .name{
    max-width:65% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  .category-section h6 .num{
    color:var(--color-primary) !important;
    font-weight:600 !important;
  }
}