*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:#000}

/* 视频容器 - 抖音样式全屏 */
.video-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;background:#000}
.video-container video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.video-container video::-webkit-media-controls{display:none!important}

/* 顶部直播标识 */
.live-badge{position:fixed;top:16px;right:16px;z-index:10;background:linear-gradient(135deg,#ff0050,#ff2d55);color:#fff;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;box-shadow:0 2px 12px rgba(255,0,80,.4)}
.live-badge::before{content:'';width:6px;height:6px;background:#fff;border-radius:50%;animation:livePulse 1.5s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}}

/* 左上角返回 */
.back-btn{position:fixed;top:16px;left:16px;z-index:10;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);border:none;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}

/* 右侧互动按钮列 */
.action-bar{position:fixed;right:12px;bottom:120px;z-index:10;display:flex;flex-direction:column;align-items:center;gap:20px}
.action-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;cursor:pointer}
.action-icon{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;font-size:22px;transition:.3s}
.action-item:active .action-icon{transform:scale(.9)}
.action-num{font-size:12px;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* 底部信息区 */
.bottom-info{position:fixed;bottom:0;left:0;right:0;z-index:10;padding:20px 16px 30px;background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 60%,transparent 100%)}

/* 主播信息 */
.host-info{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.host-avatar{width:44px;height:44px;border-radius:50%;border:2px solid #fff;object-fit:cover}
.host-text{flex:1}
.host-name{color:#fff;font-size:16px;font-weight:600;display:flex;align-items:center;gap:6px}
.host-name i{color:#ff0050;font-size:14px}
.host-desc{color:rgba(255,255,255,.7);font-size:13px;margin-top:2px}

/* 直播标题 */
.live-title{color:#fff;font-size:15px;line-height:1.6;margin-bottom:12px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.live-title .highlight{color:#ff0050;font-weight:600}

/* 多层弹幕容器 */
.danmu-container{position:fixed;top:0;left:0;width:100%;height:60%;z-index:5;pointer-events:none;overflow:hidden}

/* 浮动弹幕 */
.danmu-float{position:absolute;left:100%;white-space:nowrap;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);padding:5px 14px;border-radius:16px;color:#fff;font-size:13px;font-weight:500;animation:danmuFloat linear forwards}
.danmu-float img{width:20px;height:20px;border-radius:50%;object-fit:cover}

@keyframes danmuFloat{
  0%{transform:translateX(0)}
  100%{transform:translateX(calc(-100vw - 100%))}
}

/* 进入直播间按钮 - 视频中央半透明 */
.enter-btn{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;padding:16px 40px;border-radius:28px;background:rgba(0,0,0,.35);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.25);font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.3);transition:.3s;white-space:nowrap;animation:btnPulse 2s ease-in-out infinite}
.enter-btn:active{transform:translate(-50%,-50%) scale(.98)}
.enter-btn i{font-size:20px}

/* 按钮跳动动画 */
@keyframes btnPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.06)}
}

/* 礼物特效层 */
.gift-effect{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;pointer-events:none;opacity:0;transition:.5s}
.gift-effect.show{opacity:1;animation:giftFloat 2s ease-out forwards}
@keyframes giftFloat{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}20%{transform:translate(-50%,-60%) scale(1.2);opacity:1}100%{transform:translate(-50%,-80%) scale(1);opacity:0}}
.gift-effect .gift-icon{font-size:80px}

/* 直播间页面 */
.live-room{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;background:#000;display:none;flex-direction:column}
.live-room.active{display:flex}
.live-room-header{position:fixed;top:0;left:0;right:0;z-index:10;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.6);backdrop-filter:blur(20px)}
.live-room-header h3{color:#fff;font-size:16px;display:flex;align-items:center;gap:8px}
.live-room-header h3 .live-dot{width:8px;height:8px;background:#ff0050;border-radius:50%;animation:livePulse 1.5s infinite}
.close-room-btn{color:#fff;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.live-room-video{flex:1;display:flex;justify-content:center;align-items:center;padding:60px 0 0}
.live-room-video iframe{width:100%;height:100%;border:none}

/* 底部购物车/商品栏 */
.product-bar{position:fixed;bottom:0;left:0;right:0;z-index:10;padding:12px 16px;background:rgba(0,0,0,.7);backdrop-filter:blur(20px);display:flex;align-items:center;gap:12px}
.product-img{width:48px;height:48px;border-radius:8px;object-fit:cover;border:1px solid rgba(255,255,255,.2)}
.product-info{flex:1}
.product-name{color:#fff;font-size:14px;font-weight:500}
.product-price{color:#ff0050;font-size:16px;font-weight:700}
.product-btn{padding:8px 16px;border-radius:16px;background:#ff0050;color:#fff;border:none;font-size:13px;font-weight:600;cursor:pointer}

/* 响应式 */
@media (min-width:768px){
  .video-container video{object-fit:contain;background:#000}
}