.live-room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.live-room-card{padding:0 0 14px;text-align:left;overflow:hidden;border:1px solid #e4eaf2;border-radius:16px;background:#fff;color:#17233d;box-shadow:0 4px 18px #102a560a}.live-room-card strong,.live-room-card small{display:block;margin:10px 12px 0}.live-room-card small,.muted{color:#667085}.live-room-cover{height:150px;display:block;position:relative;background:linear-gradient(135deg,#172b4d,#155eef)}.live-room-cover img{width:100%;height:100%;object-fit:cover}.live-room-cover b{position:absolute;left:10px;top:10px;background:#e5484d;color:#fff;padding:5px 9px;border-radius:20px;font-size:12px}.live-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px;align-items:start}.live-player{display:block;width:100%;aspect-ratio:16/9;background:#101828;border-radius:14px;object-fit:contain}.live-room-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 2px}.live-room-heading h1{font-size:21px;margin:5px 0}.live-room-heading p{color:#667085;margin:0}.live-status{font-size:12px;color:#667085}.live-status.is-live{color:#d92d20}.live-chat{position:sticky;top:72px;min-height:420px;display:flex;flex-direction:column}.live-chat .section-title span{font-size:12px;color:#667085}.live-messages{height:330px;overflow:auto;display:flex;flex-direction:column;gap:7px}.live-message{margin:0;font-size:13px;line-height:1.5;overflow-wrap:anywhere}.live-message b{color:#155eef}.live-message-form{display:flex;gap:7px;margin-top:auto}.live-message-form input{min-width:0;flex:1;border:1px solid #d0d5dd;border-radius:9px;padding:10px}.live-message-form button{width:auto;padding:9px 15px}.live-chat-hint{font-size:11px;color:#667085;margin:7px 0 0}.live-products{display:grid;gap:9px}.live-product{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #eaecf0;border-radius:10px}.live-product.is-current{border-color:#ffb547;background:#fffcf5}.live-product img{width:58px;height:58px;object-fit:cover;border-radius:8px;background:#f2f4f7}.live-product strong{font-size:13px}.live-product p{font-size:12px;color:#667085;margin:4px 0}.live-product .primary{width:auto;margin:0;padding:8px 12px}.live-current-badge{font-size:11px;color:#b54708}.live-mobile-bar{display:none}@media(max-width:760px){.live-room-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.live-room-cover{height:120px}.live-layout{display:block}.live-chat{position:static;min-height:0;margin-top:14px}.live-messages{height:190px}.live-mobile-bar{position:fixed;z-index:25;bottom:calc(64px + env(safe-area-inset-bottom));left:10px;right:10px;display:flex;align-items:center;gap:8px;padding:8px;background:#fff;border:1px solid #eaecf0;border-radius:13px;box-shadow:0 4px 16px #10182820}.live-mobile-bar button,.live-mobile-bar a{border:0;background:#fff;color:#17233d;text-decoration:none;font-size:12px;white-space:nowrap}.live-mobile-bar a{flex:1;overflow:hidden;text-overflow:ellipsis}.live-mobile-bar button:first-child{color:#b54708;font-weight:700}.live-mobile-bar button:last-child{color:#155eef}body:has(.live-layout){padding-bottom:calc(132px + env(safe-area-inset-bottom))}nav:not(.diy-site-nav) button{min-width:16.66%}}
.live-current-link{max-width:58vw;overflow:hidden;text-overflow:ellipsis}.live-mobile-actions{display:flex;align-items:center;justify-content:space-between;width:100%;gap:6px}.live-mobile-actions .live-current-link{flex:1;text-align:left}.live-mobile-actions button{padding:6px 4px}@media(max-width:760px){.live-chat #live-message-form{display:none}.live-mobile-bar{flex-direction:column;align-items:stretch;padding:6px 8px;bottom:calc(64px + env(safe-area-inset-bottom))}.live-mobile-bar .live-message-form{display:flex;width:100%;margin:0}.live-mobile-bar .live-message-form input{padding:8px}.live-mobile-bar .live-message-form button{width:auto;padding:7px 11px}.live-mobile-actions .live-current-link{font-size:11px}body:has(.live-layout){padding-bottom:calc(190px + env(safe-area-inset-bottom))}}
.live-player-poster{display:flex;position:relative;flex-direction:column;justify-content:flex-end;gap:8px;padding:20px;overflow:hidden;color:#fff;background:#101828}.live-player-poster:after{position:absolute;content:"";inset:0;background:linear-gradient(0deg,#101828cc,#10182811)}.live-player-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.live-player-poster strong,.live-player-poster span{position:relative;z-index:1}.live-player-poster strong{font-size:20px}.live-player-poster span{font-size:13px}

html[data-storefront-channel="h5"] body:has(.live-h5-stage){overflow:hidden;padding:0}
html[data-storefront-channel="h5"] body:has(.live-h5-stage)>header,html[data-storefront-channel="h5"] body:has(.live-h5-stage)>nav{display:none}
html[data-storefront-channel="h5"] main#app:has(.live-h5-stage){position:fixed;z-index:40;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;margin:0;padding:0;overflow:hidden}
.live-h5-stage{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#08090b;color:#fff}
.live-h5-edge-notice{position:absolute;z-index:8;top:48%;left:50%;display:flex;min-width:220px;align-items:center;gap:12px;padding:13px 18px;border:1px solid #ffffff24;border-radius:18px;background:rgba(16,24,40,.76);color:#fff;opacity:0;pointer-events:none;backdrop-filter:blur(14px);box-shadow:0 12px 38px #0006;transform:translate(-50%,-44%) scale(.96);transition:opacity .22s ease,transform .22s ease}
.live-h5-edge-notice.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
.live-h5-edge-icon{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border:1px solid #ffffff38;border-radius:50%;background:#ffffff16;color:#fff}
.live-h5-edge-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.live-h5-edge-copy{display:grid;gap:4px;min-width:0}
.live-h5-edge-copy strong{font-size:14px;line-height:1.25}
.live-h5-edge-copy small{color:#ffffffb8;font-size:11px;line-height:1.3}
@media(max-width:560px){.live-h5-edge-notice{top:48%;min-width:214px;padding:12px 15px;border-radius:16px}.live-h5-edge-icon{width:34px;height:34px;flex-basis:34px}.live-h5-edge-copy strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.live-h5-edge-notice{transition:none}}
.live-h5-stage .live-h5-player{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;object-fit:cover;background:#08090b}
.live-h5-topbar{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 16px;background:transparent;color:#fff}
.live-h5-topbar::before{position:absolute;z-index:0;top:0;right:0;left:0;height:156px;content:"";background:linear-gradient(180deg,#000b 0%,#0008 38%,#0004 68%,transparent 100%);pointer-events:none}
.live-h5-topbar>*{position:relative;z-index:1}
.live-h5-topbar button{width:auto;margin:0;padding:6px 9px;border:0;border-radius:20px;background:#1118;color:#fff;font-size:14px;white-space:nowrap}
.live-h5-topbar .live-h5-close{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;padding:0;font-size:24px;line-height:1}
.live-h5-topbar .live-h5-close svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.live-h5-topbar .live-h5-close svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.live-h5-room-heading{display:block;flex:1;min-width:0;margin:0;padding:0;color:#fff}
.live-h5-room-heading .live-status{display:block;color:#ffcf73;font-size:11px}
.live-h5-room-heading h1{max-width:100%;margin:3px 0 1px;overflow:hidden;color:#fff;font-size:15px;text-overflow:ellipsis;white-space:nowrap}
.live-h5-room-heading p{overflow:hidden;color:#fffe;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.live-h5-live-chip{position:absolute;z-index:2;top:calc(72px + env(safe-area-inset-top));left:14px;padding:5px 10px;border:1px solid #ffffff42;border-radius:20px;background:#10182855;color:#fff;font-size:11px;backdrop-filter:blur(8px)}
.live-h5-chat{position:absolute;z-index:2;right:10px;bottom:calc(148px + env(safe-area-inset-bottom));left:10px;display:flex;width:auto;max-height:31vh;flex-direction:column;gap:6px;overflow:auto;padding:0 4px 0 0;color:#fff;mask-image:linear-gradient(180deg,transparent 0,#000 12%)}
.live-h5-chat .live-message{width:fit-content;max-width:100%;padding:4px 8px;border-radius:14px;background:#10182869;color:#fff;font-size:13px;text-shadow:0 1px 3px #0009;overflow-wrap:anywhere}
.live-h5-chat .live-message b{color:#bcd4ff}.live-h5-chat .muted{margin:0;padding:6px 9px;border-radius:14px;background:#10182869;color:#fff;font-size:12px;line-height:1.35}
.live-h5-current{position:absolute;z-index:3;right:12px;bottom:calc(150px + env(safe-area-inset-bottom));display:flex;width:min(36vw,160px);flex-direction:column;overflow:hidden;padding:0 0 9px;border:1px solid #ffffffa6;border-radius:14px;background:#fff;color:#17233d;text-align:left;box-shadow:0 6px 24px #0004}
.live-h5-current img{width:100%;height:clamp(92px,18vh,180px);object-fit:cover;background:#f2f4f7}
.live-h5-current strong,.live-h5-current small{display:-webkit-box;margin:6px 8px 0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.live-h5-current strong{font-size:12px;line-height:1.35}.live-h5-current small{color:#e5484d;font-size:12px;font-weight:700}
.live-h5-current .live-h5-hot{position:absolute;z-index:1;top:8px;left:0;padding:5px 8px;border-radius:0 12px 12px 0;background:linear-gradient(90deg,#ff7a19,#ec284e);color:#fff;font-size:11px;font-weight:700}
.live-h5-current-empty{min-height:54px;align-items:center;justify-content:center;padding:12px}
.live-h5-bottom{position:absolute;z-index:3;right:0;bottom:0;left:0;display:grid;gap:8px;padding:12px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(0deg,#050505dc 0%,#05050599 65%,transparent 100%)}
.live-h5-bottom .live-message-form{margin:0}.live-h5-bottom .live-message-form input{min-width:0;border:1px solid #ffffff52;border-radius:22px;background:#1018288c;color:#fff;backdrop-filter:blur(10px)}
.live-h5-bottom .live-message-form input::placeholder{color:#ffffffc2}.live-h5-bottom .live-message-form button{width:auto;min-width:58px;margin:0;padding:8px 14px;border-radius:20px;background:#155eef}
.live-h5-actions{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:8px}
.live-h5-actions button{width:auto;margin:0;padding:7px 10px;border:1px solid #ffffff45;border-radius:18px;background:#10182880;color:#fff;font-size:12px;white-space:nowrap}
.live-h5-current-caption{min-width:0;overflow:hidden;color:#fff9;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.live-h5-cart-sheet{position:absolute;z-index:5;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));left:10px;max-height:52vh;overflow:auto;padding:12px;border:1px solid #ffffff38;border-radius:16px;background:#111827ed;color:#fff;backdrop-filter:blur(16px)}
.live-h5-cart-sheet[hidden]{display:none}.live-h5-cart-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.live-h5-cart-heading button{width:auto;margin:0;padding:5px 10px;border:1px solid #ffffff38;border-radius:14px;background:transparent;color:#fff}
.live-h5-cart-sheet .live-products{gap:8px}.live-h5-cart-sheet .live-product{border-color:#ffffff24;background:#ffffff12;color:#fff}.live-h5-cart-sheet .live-product p,.live-h5-cart-sheet .muted{color:#ffffffa8}
.live-h5-cart-sheet .live-product.is-current{position:relative}
.live-h5-cart-sheet .live-current-badge{top:9px;left:9px}
.live-h5-cart-sheet .live-product .primary{width:auto;margin:0;padding:7px 10px;white-space:nowrap}
html[data-storefront-channel="h5"] body:has(.live-h5-stage) #service-chat-widget>.service-chat-launcher{display:none}
.live-h5-topbar{justify-content:space-between}
.live-h5-brand{display:flex;min-width:0;flex:1;align-items:center;gap:9px}
.live-h5-brand>img{width:38px;height:38px;flex:0 0 38px;border:1px solid #ffffff55;border-radius:50%;background:#fff;object-fit:cover}
.live-h5-brand>strong{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border:1px solid #ffffff55;border-radius:50%;background:#ffffff20;color:#fff;font-size:13px}
.live-h5-room-heading .live-status{display:none}
.live-h5-close{flex:0 0 34px;margin-left:8px!important}
.live-h5-current strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-h5-bottom{display:flex;align-items:center;gap:8px;padding-right:12px;padding-left:12px}
.live-h5-bottom>.live-message-form{display:flex;min-width:0;flex:1;gap:6px}
.live-h5-bottom .live-message-form input{width:100%;padding:9px 12px}
.live-h5-bottom .live-message-form .live-h5-send{display:grid;width:34px;min-width:34px;height:36px;place-items:center;padding:0;border:1px solid #ffffff45;border-radius:50%;background:#10182880;color:#fff}
.live-h5-bottom .live-h5-send svg,.live-h5-action svg{width:20px;height:20px;fill:currentColor;stroke:none}
.live-h5-actions{width:auto;flex:0 0 auto;gap:5px}
.live-h5-actions .live-h5-action{position:relative;display:grid;width:36px;height:36px;place-items:center;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff}
.live-h5-cart-action>span{position:absolute;top:-5px;right:-5px;display:grid;min-width:16px;height:16px;place-items:center;padding:0 3px;border-radius:10px;background:#ed3448;color:#fff;font-size:10px}
.live-h5-player{touch-action:pan-x}
@media(max-width:360px){.live-h5-bottom{gap:5px;padding-right:8px;padding-left:8px}.live-h5-actions{gap:3px}.live-h5-actions .live-h5-action{width:32px;height:32px}.live-h5-bottom .live-message-form input{padding-right:8px;padding-left:10px;font-size:12px}}

.live-message-form{position:relative;align-items:center}
.live-message-form .live-emoji-toggle{display:grid;width:36px;min-width:36px;height:36px;place-items:center;padding:0;border:1px solid #d0d5dd;border-radius:50%;background:#fff;color:#475467;font-size:21px;line-height:1}
.live-emoji-picker{position:absolute;z-index:8;bottom:calc(100% + 8px);left:0;display:grid;grid-template-columns:repeat(6,36px);gap:4px;width:max-content;max-width:min(260px,80vw);padding:8px;border:1px solid #eaecf0;border-radius:12px;background:#fff;box-shadow:0 8px 28px #1018282e}
.live-emoji-picker[hidden]{display:none}
.live-emoji-picker button{display:grid;width:36px;min-width:36px;height:36px;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:#17233d;font-size:21px}
.live-emoji-picker button:hover{background:#f2f4f7}
.live-message-pin{display:inline-block;margin-right:5px;padding:1px 5px;border-radius:5px;background:#fff0d6;color:#b54708;font-size:10px;font-weight:700;vertical-align:1px}
.live-message.is-pinned{padding:4px 6px;border-radius:7px;background:#fffaf0}
.live-web-share-icon{position:absolute;top:2px;right:0;display:grid;width:34px;height:34px;place-items:center;padding:0;border:0;border-radius:50%;background:#f2f4f7;color:#344054;cursor:pointer}
.live-web-share-icon svg,.live-product-buy svg,.live-h5-action svg,.live-mobile-actions svg{width:18px;height:18px;fill:currentColor;stroke:none}
.live-sidebar .live-room-heading{position:relative;padding-right:40px}
.live-product .live-product-buy{display:grid;width:36px;min-width:36px;height:36px;place-items:center;padding:0;border-radius:50%}
.live-sidebar-products .live-product{position:relative}
.live-current-badge{position:absolute;z-index:1;top:4px;left:4px;margin:0;padding:3px 7px;border-radius:0 0 7px 0;background:#f79009;color:#fff;font-size:10px;font-weight:700;line-height:1.2}
.live-sidebar-products .live-product.is-current{padding-top:8px}
.live-mobile-actions .live-mobile-cart,.live-mobile-actions .live-mobile-share{position:relative;display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;padding:0;border:0;border-radius:50%;background:#f2f4f7;color:#344054}
.live-mobile-actions .live-mobile-cart>span{position:absolute;top:-4px;right:-5px;display:grid;min-width:15px;height:15px;place-items:center;padding:0 3px;border-radius:10px;background:#155eef;color:#fff;font-size:10px}
.live-mobile-actions .live-mobile-share{color:#155eef}
.product-card-gallery .product-card-live-badge{position:absolute;z-index:4;top:10px;left:10px;display:inline-flex;min-height:22px;align-items:center;gap:5px;padding:0 8px;border:0;border-radius:11px;background:linear-gradient(105deg,#ff526a,#ee4058);color:#fff;font-size:10px;font-weight:400;line-height:1;box-shadow:0 2px 8px #10182830;cursor:pointer}
.product-card-live-bars{display:inline-flex;height:11px;align-items:center;gap:2px}
.product-card-live-bars i{display:block;width:2px;height:4px;border-radius:2px;background:currentColor;animation:product-live-bars 850ms ease-in-out infinite alternate;transform-origin:center}
.product-card-live-bars i:nth-child(2){height:9px;animation-delay:180ms}
.product-card-live-bars i:nth-child(3){height:6px;animation-delay:360ms}
@keyframes product-live-bars{from{transform:scaleY(.5);opacity:.75}to{transform:scaleY(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.product-card-live-bars i{animation:none}}
@media(max-width:560px){.product-card-gallery .product-card-live-badge{top:6px;left:6px;min-height:19px;gap:4px;padding:0 6px;border-radius:10px;font-size:8px}.product-card-live-bars{height:9px;gap:1px}.product-card-live-bars i{width:2px;height:3px}.product-card-live-bars i:nth-child(2){height:7px}.product-card-live-bars i:nth-child(3){height:5px}}
.live-h5-bottom .live-message-form .live-emoji-toggle{flex:0 0 34px;width:34px;min-width:34px;height:34px;padding:0;border-color:#ffffff45;background:#10182880;color:#fff;font-size:21px}
.live-h5-bottom .live-emoji-picker{bottom:calc(100% + 16px);grid-template-columns:repeat(6,34px);background:#101828ed;border-color:#ffffff38}
.live-h5-bottom .live-emoji-picker button{width:34px;min-width:34px;height:34px;color:#fff}
.live-mobile-bar .live-emoji-picker{bottom:calc(100% + 7px)}
.live-h5-current{bottom:calc(76px + env(safe-area-inset-bottom))}
.live-layout--web{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.live-layout--web .live-main{display:flex;min-width:0;align-items:flex-start;justify-content:center}
.live-layout--web .live-web-player-stage{position:relative;display:flex;width:100%;min-width:0;align-items:flex-start;justify-content:center;overflow:hidden;border-radius:14px;background:#101828}
.live-layout--web .live-web-danmaku{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none}
.live-web-danmaku-item{position:absolute;right:0;display:inline-flex;align-items:center;gap:5px;max-width:none;padding:6px 11px;border:1px solid #ffffff38;border-radius:18px;background:#101828ad;color:#fff;font-size:clamp(13px,1.1vw,17px);font-weight:600;line-height:1.25;text-shadow:0 1px 3px #000b;white-space:nowrap;backdrop-filter:blur(5px);transform:translateX(100%);animation:live-web-danmaku-pass var(--danmaku-duration,10s) linear forwards}
.live-web-danmaku-item b{color:#bcd4ff}
@keyframes live-web-danmaku-pass{to{transform:translateX(var(--danmaku-travel,-1600px))}}
.live-layout--web .live-player{width:100%;height:auto;max-height:1080px;aspect-ratio:auto;object-fit:contain}
.live-sidebar{display:grid;min-width:0;align-content:start;gap:12px}
.live-sidebar .live-room-summary{padding:14px}
.live-sidebar .live-room-heading{align-items:flex-start;padding:0}
.live-sidebar .live-room-heading h1{overflow-wrap:anywhere}
.live-sidebar .live-current-link{margin:10px 0 0;color:#667085;font-size:12px}
.live-layout--web .live-chat{position:static;min-height:320px;margin:0;padding:14px}
.live-layout--web .live-messages{height:180px}
.live-sidebar-products .live-products{max-height:38vh;overflow:auto;padding-right:3px}
@media(max-width:760px){.live-layout--web{display:block}.live-sidebar{margin-top:14px}.live-layout--web .live-player{max-height:min(1080px,calc(100vh - 24px));max-height:min(1080px,calc(100dvh - 24px))}.live-sidebar-products .live-products{max-height:none}}
.live-message-form .live-emoji-picker{box-sizing:border-box;width:246px;max-width:calc(100vw - 24px);grid-template-columns:repeat(6,minmax(0,1fr));justify-items:center;left:0}
.live-h5-bottom .live-emoji-picker{width:236px;grid-template-columns:repeat(6,34px);gap:4px;padding:8px}
.live-h5-bottom .live-emoji-picker button{display:grid;flex:none;width:34px;min-width:34px;max-width:34px;height:34px;margin:0;padding:0;place-items:center;border:0;border-radius:8px;background:transparent;color:#fff;box-shadow:none;font-size:21px;line-height:1}
.live-h5-bottom .live-emoji-picker button:hover{background:#ffffff20}
.live-reply-draft{position:absolute;z-index:9;bottom:calc(100% + 7px);left:0;display:flex;align-items:center;gap:8px;max-width:min(360px,calc(100vw - 28px));padding:7px 10px;border:1px solid #d0d5dd;border-radius:9px;background:#fff;color:#475467;font-size:12px;box-shadow:0 4px 16px #10182820}
.live-reply-draft[hidden]{display:none}
.live-reply-draft span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-message-form .live-reply-draft button{flex:none;width:24px;min-width:24px;height:24px;padding:0;border:0;border-radius:50%;background:#f2f4f7;color:#475467;line-height:1}

.live-layout--web{align-items:stretch}
.live-layout--web .live-main{flex-direction:column;justify-content:flex-start}
.live-layout--web .live-sidebar{display:flex;height:100%;flex-direction:column}
.live-layout--web .live-web-navigation{margin-top:auto}
.live-layout--web .live-sidebar-products{flex:0 0 auto}
.live-layout--web .live-current-badge{top:9px;left:9px;border-radius:5px}
.live-streamer-profile-row{display:flex;min-width:0;align-items:center;gap:12px}
.live-streamer-copy{display:flex;min-width:0;flex-direction:column;gap:3px}
.live-streamer-avatar{display:grid;width:56px;height:56px;flex:0 0 56px;overflow:hidden;place-items:center;border-radius:50%;background:#eaf0ff;color:#155eef;font-size:18px;font-weight:700}
.live-streamer-avatar img{width:100%;height:100%;object-fit:cover}
.live-sidebar .live-room-heading>div{display:flex;min-width:0;flex-direction:column;align-items:flex-start}
.live-h5-topbar .live-h5-mute{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;padding:0;font-size:0}
.live-h5-mute .diy-icon{width:19px;height:19px;fill:currentColor}
.live-h5-topbar .live-h5-mute svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.live-h5-stage,.live-h5-stage *{scrollbar-width:none;-ms-overflow-style:none}
.live-h5-stage::-webkit-scrollbar,.live-h5-stage *::-webkit-scrollbar{display:none;width:0;height:0}
.live-h5-stage .live-h5-player{touch-action:none}
.live-layout--web .live-messages{scrollbar-width:none;-ms-overflow-style:none}
.live-layout--web .live-messages::-webkit-scrollbar{display:none;width:0;height:0}
@media(hover:hover){.live-layout--web .live-message-reply{visibility:hidden;opacity:0;transition:opacity .15s ease}.live-layout--web .live-message:hover .live-message-reply,.live-layout--web .live-message:focus-within .live-message-reply{visibility:visible;opacity:1}}
@media(max-width:760px){.live-layout--web .live-sidebar{height:auto}.live-layout--web .live-web-navigation{margin-top:0}}
.live-message{position:relative}
.live-message-reply{display:inline;padding:0;border:0;background:transparent;color:#667085;font-size:11px;cursor:pointer}
.live-message-reply:hover{color:#155eef}
.live-reply-context{display:block;margin-bottom:3px;color:#667085;font-size:11px}
.live-h5-bottom .live-reply-draft{max-width:calc(100vw - 28px);border-color:#ffffff38;background:#101828ed;color:#fff}
.live-h5-bottom .live-message-form .live-reply-draft button{min-width:24px;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:#ffffff20;color:#fff}

/* Web live rooms are immersive: hide storefront chrome and keep the player within the viewport. */
body:has(.live-layout--web)>header,body:has(.live-layout--web)>nav,body:has(.live-layout--web) .diy-site-header,body:has(.live-layout--web) .diy-site-nav{display:none!important}
body:has(.live-layout--web) main#app{width:100%;max-width:none;margin:0;padding:16px 24px 24px;box-sizing:border-box}
body:has(.live-layout--web) main#app>.back,body:has(.live-layout--web) main#app>.diy-site-footer,body:has(.live-layout--web) .live-mobile-bar{display:none!important}
.live-layout--web .live-player{width:min(100%,calc((100vh - 32px)*16/9));width:min(100%,calc((100dvh - 32px)*16/9));max-height:min(1080px,calc(100vh - 32px));max-height:min(1080px,calc(100dvh - 32px))}
.live-layout--web .live-player-poster{height:auto;aspect-ratio:16/9}
.live-layout--web .live-message-form{gap:0}
.live-web-input-shell{position:relative;display:flex;width:100%;min-width:0;flex:1;align-items:center}
.live-web-input-shell>input{box-sizing:border-box;width:100%;height:42px;padding:8px 44px;border:1px solid #d0d5dd;border-radius:24px;background:#fff}
.live-web-input-shell>input:focus{border-color:#84adff;outline:2px solid #dbeafe}
.live-web-input-shell>.live-emoji-toggle,.live-web-input-shell>.live-web-send{position:absolute;z-index:1;display:grid;width:34px;min-width:34px;height:34px;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#475467}
.live-web-input-shell>.live-emoji-toggle{left:5px;font-size:20px}
.live-web-input-shell>.live-web-send{right:5px;color:#155eef}
.live-web-input-shell>.live-web-send .diy-icon{width:18px;height:18px}
.live-web-input-shell>.live-emoji-picker{left:0}
.live-web-input-shell>.live-reply-draft{left:0}
.live-web-input-shell>.live-web-send:disabled,.live-web-input-shell>.live-emoji-toggle:disabled{opacity:.45}

/* Align the H5 chat stack with the bottom edge of the floating product card. */
.live-h5-chat{bottom:calc(76px + env(safe-area-inset-bottom))}
/* Keep the hot-sales marker in a dedicated strip at the top of the product card. */
.live-h5-current .live-h5-hot{position:static;display:block;box-sizing:border-box;width:100%;padding:6px 9px;border-radius:0;background:linear-gradient(90deg,#ff7a19,#ec284e);line-height:1.2}
.live-h5-current small{display:block;margin:7px 8px 0;padding:6px 8px;border-radius:6px;background:#e5484d;color:#fff;line-height:1.3}
/* Put emoji and send affordances inside one shared message-input pill. */
.live-h5-bottom>.live-message-form{flex:1 1 auto}
.live-h5-input-shell{position:relative;display:flex;min-width:0;flex:1;align-items:center}
.live-h5-bottom .live-h5-input-shell>input{box-sizing:border-box;width:100%;height:42px;padding:8px 42px;border:1px solid #ffffff52;border-radius:24px;background:#101828a8;color:#fff;backdrop-filter:blur(10px)}
.live-h5-bottom .live-h5-input-shell>input::placeholder{color:#ffffffc2}
.live-h5-bottom .live-h5-input-shell>.live-emoji-toggle,.live-h5-bottom .live-h5-input-shell>.live-h5-send{position:absolute;z-index:1;display:grid;width:32px;min-width:32px;height:32px;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#fff}
.live-h5-bottom .live-h5-input-shell>.live-emoji-toggle{left:5px}
.live-h5-bottom .live-h5-input-shell>.live-h5-send{right:5px}
.live-h5-bottom .live-h5-input-shell>.live-h5-send svg{width:20px;height:20px;fill:currentColor;stroke:none}
.live-h5-bottom .live-h5-input-shell>.live-emoji-picker{left:0}
.live-h5-cart-action .live-h5-mini-cart-icon{width:23px;height:23px;color:#ffd43b;fill:none;stroke:none}

/* H5 featured product card follows the compact live-commerce overlay reference. */
.live-h5-current{align-items:stretch;gap:7px;width:min(39vw,170px);padding:0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
.live-h5-current .live-h5-hot{position:static;align-self:flex-start;display:inline-flex;width:auto;min-height:34px;align-items:center;padding:5px 14px;border:0;border-radius:18px;background:linear-gradient(100deg,#f8b52b,#f49221);color:#fff;font-size:17px;font-weight:800;line-height:1.2;box-shadow:0 3px 12px #8b4c1738}
.live-h5-current-card{display:flex;flex-direction:column;gap:0;overflow:hidden;padding:6px;border:1px solid #ffffffbf;border-radius:24px;background:#fff;color:#17233d;box-shadow:0 8px 28px #0005}
.live-h5-current-card[hidden]{display:none}
.live-h5-current:has(.live-h5-current-card[hidden]) .live-h5-hot{display:none}
.live-h5-current-media{position:relative;overflow:hidden;border-radius:18px 18px 8px 8px;background:#f2f4f7}
.live-h5-current-image{display:block;width:100%;height:clamp(155px,30vh,300px);margin:0;padding:0;overflow:hidden;border:0;border-radius:inherit;background:#f2f4f7}
.live-h5-current-image img{display:block;width:100%;height:100%;object-fit:cover}
.live-h5-presenting{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:16px;background:#1d232b33;color:#fff;font-size:14px;font-weight:700;backdrop-filter:blur(8px)}
.live-h5-presenting i{width:7px;height:7px;border-radius:50%;background:#f04438;box-shadow:0 0 0 3px #f0443840}
.live-h5-current-close{position:absolute;top:10px;right:10px;display:grid;width:30px;height:30px;place-items:center;padding:0;border:0;border-radius:50%;background:#20242a75;color:#fff;font-family:Arial,sans-serif;font-size:22px;font-weight:300;line-height:1;text-align:center;backdrop-filter:blur(8px)}
.live-h5-current-card>strong{display:-webkit-box;margin:11px 9px 8px;overflow:hidden;color:#242832;font-size:15px;font-weight:700;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.live-h5-current-buy{display:flex;width:100%;min-height:48px;align-items:center;justify-content:space-between;margin:0;padding:5px 14px;border:0;border-radius:25px;background:linear-gradient(100deg,#ff6448,#f51f43);color:#fff;text-align:left;box-shadow:inset -2px 0 0 #ff91a2}
.live-h5-current-buy span:first-child{font-size:22px;font-weight:800;letter-spacing:-.3px}
.live-h5-current-buy span:last-child{padding-left:14px;font-size:20px;font-weight:800}
@media(max-width:360px){.live-h5-current{width:min(39vw,150px)}.live-h5-current-image{height:clamp(140px,27vh,240px)}.live-h5-current-buy span:first-child{font-size:19px}.live-h5-current-buy span:last-child{font-size:17px}}

/* Web live-room listing: six cards per desktop row with a video-shaped cover. */
.live-room-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.live-room-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.live-room-page-head>div{min-width:0}
.live-room-page-head .live-room-start-link{flex:0 0 auto;width:auto;margin:0;padding:9px 14px;white-space:nowrap}
.live-room-card{box-shadow:none;transition:box-shadow .18s ease,transform .18s ease}
.live-room-card:hover,.live-room-card:focus-visible{z-index:1;box-shadow:0 8px 24px rgba(16,42,86,.16);transform:translateY(-2px)}
.live-room-cover{width:100%;height:auto;aspect-ratio:16/9}
.live-room-cover{height:auto;aspect-ratio:auto}
.live-room-cover:has(img){background:transparent}
.live-room-cover img{display:block;width:100%;height:auto;object-fit:contain}
.live-room-cover:not(:has(img)){aspect-ratio:16/9}
.live-room-cover b{display:none}
.live-room-live-badge{position:absolute;top:10px;left:10px;display:inline-flex;min-height:22px;align-items:center;justify-content:center;padding:0 8px;border:0;border-radius:11px;background:linear-gradient(105deg,#ff526a,#ee4058);color:#fff;line-height:1;box-shadow:0 2px 8px #10182830}
@media(max-width:560px){.live-room-live-badge{top:6px;left:6px;min-height:19px;padding:0 6px;border-radius:10px}}
@media(max-width:1200px){.live-room-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.live-room-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.live-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.live-room-cover{height:auto}}

/* Scale the immersive H5 controls to match the compact storefront UI. */
@media(max-width:560px){
  html[data-storefront-channel="h5"] .live-h5-topbar{gap:8px;padding:calc(7px + env(safe-area-inset-top)) 10px 10px}
  html[data-storefront-channel="h5"] .live-h5-brand{gap:7px}
  html[data-storefront-channel="h5"] .live-h5-brand>img,
  html[data-storefront-channel="h5"] .live-h5-brand>strong{width:32px;height:32px;flex-basis:32px}
  html[data-storefront-channel="h5"] .live-h5-brand>strong{font-size:11px}
  html[data-storefront-channel="h5"] .live-h5-room-heading h1{margin:2px 0 1px;font-size:14px}
  html[data-storefront-channel="h5"] .live-h5-room-heading p{font-size:10px}
  html[data-storefront-channel="h5"] .live-h5-close{width:34px;height:34px;flex-basis:34px;margin-left:5px!important;font-size:24px;line-height:1}
  html[data-storefront-channel="h5"] .live-h5-chat{right:10px;left:10px;width:auto;max-height:19.3vh;gap:5px}
  html[data-storefront-channel="h5"] .live-h5-chat .live-message{padding:3px 7px;font-size:12px;line-height:1.35}
  html[data-storefront-channel="h5"] .live-h5-current{right:10px;bottom:calc(76px + env(safe-area-inset-bottom));width:clamp(124px,33vw,148px);gap:5px}
  html[data-storefront-channel="h5"] .live-h5-current .live-h5-hot{min-height:27px;padding:4px 10px;border-radius:15px;font-size:13px;line-height:1.1;box-shadow:0 2px 8px #8b4c1730}
  html[data-storefront-channel="h5"] .live-h5-current-card{padding:4px;border-radius:18px;box-shadow:0 5px 18px #0004}
  html[data-storefront-channel="h5"] .live-h5-current-media{border-radius:13px 13px 7px 7px}
  html[data-storefront-channel="h5"] .live-h5-current-image{height:clamp(112px,18vh,172px)}
  html[data-storefront-channel="h5"] .live-h5-presenting{top:8px;left:8px;gap:5px;padding:4px 8px;border-radius:13px;font-size:11px}
  html[data-storefront-channel="h5"] .live-h5-presenting i{width:6px;height:6px;box-shadow:0 0 0 2px #f0443840}
  html[data-storefront-channel="h5"] .live-h5-current-close{top:7px;right:7px;display:grid;width:24px;height:24px;place-items:center;padding:0;font-size:20px;line-height:1;text-align:center}
  html[data-storefront-channel="h5"] .live-h5-current-card>strong{margin:7px 6px 6px;font-size:12px;line-height:1.3}
  html[data-storefront-channel="h5"] .live-h5-current-buy{box-sizing:border-box;width:100%;height:24px;min-height:24px;padding:3px 8px;border-radius:18px;font-size:12px;line-height:1.1}
  html[data-storefront-channel="h5"] .live-h5-current-buy .live-h5-price{display:inline-flex;align-items:baseline;gap:1px;font-size:12px;letter-spacing:0}
  html[data-storefront-channel="h5"] .live-h5-current-buy .live-h5-price-currency{font-size:12px;font-weight:400}
  html[data-storefront-channel="h5"] .live-h5-current-buy .live-h5-price-value{font-size:12px;font-weight:700}
  html[data-storefront-channel="h5"] .live-h5-current-buy span:last-child{padding-left:5px;font-size:12px;font-weight:400;line-height:1.1;white-space:nowrap}
  html[data-storefront-channel="h5"] .live-h5-bottom{gap:6px;padding-right:10px;padding-left:10px}
  html[data-storefront-channel="h5"] .live-h5-bottom .live-h5-input-shell>input{height:38px;padding:7px 38px;font-size:13px}
  html[data-storefront-channel="h5"] .live-h5-bottom .live-h5-input-shell>.live-emoji-toggle,
  html[data-storefront-channel="h5"] .live-h5-bottom .live-h5-input-shell>.live-h5-send{width:29px;min-width:29px;height:29px}
  html[data-storefront-channel="h5"] .live-h5-bottom .live-h5-input-shell>.live-h5-send svg{width:18px;height:18px}
  html[data-storefront-channel="h5"] .live-h5-actions{gap:3px}
  html[data-storefront-channel="h5"] .live-h5-actions .live-h5-action{width:30px;height:30px}
  html[data-storefront-channel="h5"] .live-h5-actions .live-h5-action svg{width:18px;height:18px}
}
.live-web-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.live-web-navigation-adjacent{display:flex;align-items:center;gap:8px}
.live-web-navigation button{display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:7px;margin:0;padding:9px 14px;border-radius:8px}
.live-web-navigation button:disabled{opacity:.45;cursor:not-allowed}
.live-web-navigation .diy-icon{width:13px;height:13px}

.live-web-player-controls{position:absolute;z-index:5;right:0;bottom:0;left:0;display:flex;height:60px;padding:0 14px;align-items:center;gap:12px;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0));pointer-events:none}
.live-web-player-controls>span{flex:1}
.live-web-player-controls>button{display:grid;width:38px;min-width:38px;height:38px;margin:0;padding:0;place-items:center;border:0;border-radius:50%;background:rgba(16,24,40,.6);color:#fff;pointer-events:auto}
.live-web-player-controls>button:hover,.live-web-player-controls>button:focus-visible{background:rgba(16,24,40,.85);outline:2px solid rgba(255,255,255,.8);outline-offset:1px}
.live-web-player-controls>button svg{display:block;width:20px;height:20px;fill:currentColor;stroke:none}
.live-web-player-controls>button:last-child svg path:not(:first-child){fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.8}
.live-web-player-frozen-frame{position:absolute;z-index:2;display:block;max-width:none;max-height:none;pointer-events:none}