.page-live{padding-top:calc(var(--header-height) + 20px);min-height:100vh}.live-nav{margin-bottom:20px;border-bottom:1px solid #e6e6e6;padding-bottom:0}.live-nav .nav-item{display:inline-block;position:relative;margin-right:40px;font-size:16px;color:#777;padding-bottom:14px;cursor:pointer;transition:color .2s}.live-nav .nav-item:hover{color:#333}.live-nav .nav-item.active{color:#000;font-size:24px;font-weight:600}.live-nav .nav-item.active .underline{position:absolute;bottom:0;left:0;width:100%;height:6px;border-radius:3px;background:#ffb600}.live-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:40px}.live-grid .live-card{background:#fff;border-radius:6px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}.live-grid .live-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001f}.live-grid .live-card .card-cover{position:relative;width:100%;height:127px;overflow:hidden}.live-grid .live-card .card-cover img,.live-grid .live-card .card-cover .cover-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}.live-grid .live-card:hover .card-cover img,.live-grid .live-card:hover .card-cover .cover-placeholder{transform:scale(1.05)}.live-grid .live-badge-stripe{position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;font-size:11px;padding:2px 6px;border-radius:2px;display:flex;align-items:center;gap:3px;z-index:2}.live-grid .live-badge-stripe .bar{display:inline-flex;gap:1px;margin-right:2px}.live-grid .live-badge-stripe .bar span{display:inline-block;width:2px;height:8px;background:#fff;border-radius:1px}.live-grid .live-badge-stripe .bar span:nth-child(1){height:5px}.live-grid .live-badge-stripe .bar span:nth-child(2){height:8px}.live-grid .live-badge-stripe .bar span:nth-child(3){height:6px}.live-grid .card-tag{position:absolute;top:8px;left:0;background:#f8c21b;color:#fff;font-size:12px;padding:2px 10px 2px 6px;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 100%,0 100%);z-index:2}.live-grid .card-cover .cover-bottom{position:absolute;bottom:0;left:0;right:0;padding:20px 10px 6px;background:linear-gradient(transparent,#000c);display:flex;justify-content:space-between;align-items:flex-end;color:#fff;font-size:12px;z-index:2;pointer-events:none}.live-grid .card-cover .cover-bottom .anchor-name{display:flex;align-items:center;gap:4px}.live-grid .card-cover .cover-bottom .anchor-name .head-sm{width:18px;height:18px;border-radius:50%}.live-grid .card-cover .cover-bottom .viewer-count{display:flex;align-items:center;gap:2px}.live-grid .card-cover .cover-bottom .viewer-count img{width:12px;height:12px}.live-grid .card-title{height:34px;padding:10px 12px;font-size:14px;color:#333;background:#fff;line-height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.live-grid .card-meta{padding:4px 10px 10px;font-size:12px;color:#777;display:flex;justify-content:space-between;align-items:center}.live-grid .card-meta .meta-anchor{display:flex;align-items:center;gap:4px;max-width:60%;overflow:hidden}.live-grid .card-meta .meta-anchor .head-sm{width:20px;height:20px;border-radius:50%;flex-shrink:0}.live-grid .card-meta .meta-viewers{display:flex;align-items:center;gap:2px}.live-grid .card-meta .meta-viewers img{width:12px;filter:brightness(0) saturate(100%) invert(60%)}.live-grid .card-meta .meta-anchor .head-sm{width:20px;height:20px;border-radius:50%;flex-shrink:0;object-fit:cover}.live-grid .card-meta .meta-anchor .ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media screen and (max-width:1400px){.live-grid{grid-template-columns:repeat(4,1fr)}}@media screen and (max-width:768px){.live-grid{display:block;overflow:hidden;padding:0;gap:0}.live-grid .live-card{width:50%;margin-bottom:10px;border-radius:4px;float:left}.live-grid .live-card:nth-child(2n){float:left;padding-right:5px}.live-grid .live-card:nth-child(2n-1){float:right;padding-left:5px}.live-grid .live-card .card-cover{height:92px;padding-bottom:0;position:relative;border-radius:4px;overflow:hidden}.live-grid .live-card .card-cover img,.live-grid .live-card .card-cover .cover-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.live-grid .card-title{height:17px;line-height:17px;font-size:12px;padding:4px 0 0;background:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.live-grid .card-meta{display:none}.live-grid .live-badge-stripe{top:4px;left:6px;right:auto;background:#fa3434;padding:0 4px;height:16px;line-height:16px;font-size:10px;border-radius:2px}.live-grid .live-badge-stripe .bar,.live-grid .live-card .card-cover .cover-bottom,.live-grid .card-tag{display:none}.live-nav .nav-item{margin-right:16px;font-size:15px;padding-bottom:10px}.live-nav .nav-item.active{font-size:20px}}