:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0;background:#0d1210}
body{overflow:hidden}
button,input{font:inherit}
button{border:0;color:inherit;background:none;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ui-icon{width:22px;height:22px;fill:currentColor}
.live-room{position:relative;width:min(100%,720px);height:100vh;height:100dvh;min-height:580px;margin:0 auto;overflow:hidden;color:#fff;background:#101613;isolation:isolate}
.live-room-background{position:absolute;inset:0;z-index:-3;width:100%;height:100%;display:block;object-fit:cover;object-position:center center}
.live-room-vignette{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(4,9,7,.52) 0,rgba(5,9,8,.06) 29%,rgba(5,9,8,.08) 52%,rgba(5,9,8,.7) 82%,rgba(5,9,8,.92) 100%),linear-gradient(90deg,rgba(2,7,5,.2),transparent 28%,transparent 72%,rgba(2,7,5,.18));pointer-events:none}
.live-room-header{position:absolute;left:0;right:0;top:0;z-index:10;min-height:72px;padding:calc(11px + env(safe-area-inset-top)) 11px 8px;display:flex;align-items:center;gap:7px}
.live-room-back,.live-room-more{width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(12,20,16,.44);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.live-room-back .ui-icon{width:21px;height:21px}
.live-room-more{font-size:15px;font-weight:900;letter-spacing:.04em}
.live-host-chip{height:43px;min-width:0;flex:1;padding:3px 4px;display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:rgba(13,22,18,.46);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.live-host-avatar{width:35px;height:35px;flex:0 0 35px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;color:#fff;background:linear-gradient(145deg,#20aa80,#07533f);font-size:12px;font-weight:850}
.live-host-chip>span:nth-child(2){min-width:0;display:grid;flex:1}
.live-host-chip strong{overflow:hidden;font-size:11px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.live-host-chip small{margin-top:2px;display:flex;align-items:center;gap:4px;color:rgba(255,255,255,.72);font-size:8px;white-space:nowrap}
.live-host-chip small i{width:5px;height:5px;border-radius:50%;background:#33d18f}
.live-host-chip>button{height:31px;padding:0 9px;flex:0 0 auto;border-radius:16px;color:#fff;background:#e9435b;font-size:9px;font-weight:850;white-space:nowrap}
.live-host-chip>button.active{background:#0c8e68}
.live-audience-summary{height:39px;padding:0 6px;display:flex;align-items:center;border-radius:20px;background:rgba(13,22,18,.43);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.live-audience-summary>span{width:24px;height:24px;margin-left:-7px;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.9);border-radius:50%;color:#fff;background:#176c55;font-size:8px;font-weight:850}
.live-audience-summary>span:first-child{margin-left:0;background:#a0587b}
.live-audience-summary>span:nth-child(2){background:#9c6b35}
.live-audience-summary>b{margin:0 3px 0 5px;font-size:8px;font-weight:750}
.live-room-meta{position:absolute;left:13px;right:13px;top:calc(102px + env(safe-area-inset-top));z-index:4;max-width:430px;text-shadow:0 2px 9px rgba(0,0,0,.55)}
.live-room-label{width:max-content;height:22px;padding:0 8px;display:flex;align-items:center;gap:5px;border-radius:7px;background:#ed3e56;font-size:9px;font-weight:900;letter-spacing:.05em;text-shadow:none}
.live-room-label i{width:5px;height:5px;border-radius:50%;background:#fff}
.live-room-meta h1{max-width:88%;margin:9px 0 5px;overflow:hidden;font-family:Georgia,"Noto Serif SC",serif;font-size:20px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.live-room-meta>p{margin:0;display:flex;align-items:center;gap:4px;color:rgba(255,255,255,.8);font-size:10px}
.live-room-meta>p .ui-icon{width:12px;height:12px}
.live-room-meta>div{margin-top:9px;display:flex;align-items:center;gap:9px}
.live-room-meta>div button{height:29px;padding:0 11px;border:1px solid rgba(255,255,255,.7);border-radius:15px;color:#fff;background:rgba(14,27,21,.33);font-size:9px;font-weight:800;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.live-room-meta>div button.active{border-color:#16aa7b;background:#07855f}
.live-room-meta>div span{font-size:8px;color:rgba(255,255,255,.78)}
.live-chat{position:absolute;left:11px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:5;width:min(74%,430px);max-height:220px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;overflow:hidden;mask-image:linear-gradient(transparent,#000 28%);-webkit-mask-image:linear-gradient(transparent,#000 28%)}
.live-chat p{width:max-content;max-width:100%;margin:0;padding:5px 8px;border-radius:9px;color:#fff;background:rgba(15,23,19,.42);font-size:10px;line-height:1.4;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.live-chat p strong{margin-right:6px;color:#66e3b6;font-weight:800}
.live-chat p span{overflow-wrap:anywhere}
.live-chat .live-system-message{color:#bcebd8;background:rgba(6,111,81,.42)}
.live-composer{position:absolute;left:0;right:0;bottom:0;z-index:12;min-height:64px;padding:7px 10px calc(7px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:5px;background:linear-gradient(0deg,rgba(4,10,7,.86),rgba(4,10,7,.22))}
.live-composer input{width:80px;min-width:0;height:40px;flex:1;padding:0 13px;border:1px solid rgba(255,255,255,.22);border-radius:20px;outline:0;color:#fff;background:rgba(17,27,22,.54);font-size:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.live-composer input::placeholder{color:rgba(255,255,255,.65)}
.live-composer>button{width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;background:rgba(17,27,22,.5);font-size:18px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.live-composer>button.active{color:#fff;background:#ed4157}
.live-composer>.live-send-button{width:auto;min-width:43px;padding:0 9px;border-color:#07865f;border-radius:18px;background:#07865f;font-size:10px;font-weight:850}
.live-drawer-backdrop{position:absolute;inset:0;z-index:20;width:100%;height:100%;background:rgba(0,0,0,.42)}
.live-drawer-backdrop[hidden]{display:none}
.live-audience-drawer{position:absolute;right:0;top:0;bottom:0;z-index:21;width:min(82%,410px);padding:calc(19px + env(safe-area-inset-top)) 14px calc(15px + env(safe-area-inset-bottom));display:flex;flex-direction:column;color:#fff;background:rgba(18,25,22,.96);box-shadow:-18px 0 42px rgba(0,0,0,.3);transform:translateX(102%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.live-audience-drawer.open{transform:translateX(0);visibility:visible;transition-delay:0s}
.live-audience-drawer>header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.live-audience-drawer>header h2{margin:0;font-size:17px}
.live-audience-drawer>header p{margin:4px 0 0;color:rgba(255,255,255,.58);font-size:9px}
.live-audience-drawer>header button{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);font-size:25px;line-height:1}
.live-audience-drawer>nav{height:48px;margin-top:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid rgba(255,255,255,.1)}
.live-audience-drawer>nav button{position:relative;color:rgba(255,255,255,.63);font-size:11px;font-weight:750}
.live-audience-drawer>nav button.active{color:#fff}
.live-audience-drawer>nav button.active::after{content:"";position:absolute;left:25%;right:25%;bottom:-1px;height:3px;border-radius:2px;background:#20c58e}
.live-audience-list{min-height:0;margin:5px 0 0;padding:0;overflow-y:auto;list-style:none;overscroll-behavior:contain}
.live-audience-list li{min-height:59px;display:grid;grid-template-columns:20px 38px minmax(0,1fr) auto;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.07)}
.live-audience-list li[hidden]{display:none}
.live-audience-list li>b{color:#f4ce62;font-size:11px;text-align:center}
.live-audience-list li>span{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.6);border-radius:50%;background:linear-gradient(145deg,#b66683,#65455f);font-size:11px;font-weight:850}
.live-audience-list li>div{min-width:0;display:grid}
.live-audience-list li strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.live-audience-list li small{margin-top:3px;color:rgba(255,255,255,.54);font-size:8px}
.live-audience-list li em{color:#efce71;font-size:9px;font-style:normal;font-weight:800}
.live-room-toast{position:absolute;left:50%;bottom:82px;z-index:30;max-width:calc(100% - 40px);margin:0;padding:9px 14px;border-radius:18px;color:#fff;background:rgba(18,29,23,.93);font-size:11px;opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity .2s ease,transform .2s ease}
.live-room-toast.show{opacity:1;transform:translate(-50%,0)}
.live-room a:focus-visible,.live-room button:focus-visible,.live-composer input:focus-visible{outline:3px solid rgba(54,223,163,.72);outline-offset:2px}
@media(max-width:390px){.live-room-header{padding-left:8px;padding-right:8px;gap:4px}.live-room-back,.live-room-more{width:34px;height:34px;flex-basis:34px}.live-host-chip{gap:4px}.live-host-chip>button{padding:0 7px}.live-audience-summary{padding-left:4px;padding-right:4px}.live-audience-summary>span{width:22px;height:22px}.live-audience-summary>b{display:none}.live-room-meta{left:10px;right:10px}.live-composer{padding-left:7px;padding-right:7px;gap:4px}.live-composer>button{width:32px;height:32px;flex-basis:32px;font-size:15px}.live-composer>.live-send-button{min-width:39px;padding:0 7px}.live-chat{left:8px}.live-audience-drawer{width:88%}}
@media(min-width:721px){.live-room{box-shadow:0 0 45px rgba(0,0,0,.35)}}
@media(prefers-reduced-motion:reduce){.live-audience-drawer,.live-room-toast{transition:none}}