:root{--live-bg:#f8f4ee;--live-card:#fffdf9;--live-ink:#252d29;--live-muted:#898f8b;--live-green:#07865f;--live-red:#ed4156;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
html{background:#e8e4de}
body{min-height:100vh;margin:0;color:var(--live-ink);background:#e8e4de}
button,input{font:inherit}
button{border:0;color:inherit;background:none;cursor:pointer}
.live-list-shell{position:relative;width:min(100%,720px);min-height:100vh;margin:0 auto;background:var(--live-bg);box-shadow:0 0 30px rgba(44,37,29,.08)}
.live-list-topbar{height:70px;padding:calc(8px + env(safe-area-inset-top)) 15px 0;display:grid;grid-template-columns:40px minmax(0,1fr) 38px 38px 40px;align-items:center;gap:5px;background:var(--live-bg)}
.live-list-topbar h1{margin:0 0 0 5px;font-family:Georgia,"Noto Serif SC",serif;font-size:20px;letter-spacing:.02em}
.live-list-back,.live-list-search-toggle,.live-list-topbar .notify-btn{position:relative;width:38px;height:38px;display:grid;place-items:center;border-radius:50%}
.live-list-back .ui-icon,.live-list-search-toggle .ui-icon,.live-list-topbar .notify-btn .ui-icon{width:21px;height:21px}
.live-list-topbar .notify-btn i{position:absolute;right:5px;top:5px;width:7px;height:7px;border:2px solid var(--live-bg);border-radius:50%;background:var(--live-red)}
.live-list-topbar .avatar-link{position:relative;width:38px;height:38px;overflow:visible;border-radius:50%}
.live-list-topbar .avatar-link img{width:100%;height:100%;display:block;border:2px solid #fff;border-radius:50%;object-fit:cover}
.live-list-topbar .online-dot{position:absolute;right:0;bottom:0;width:9px;height:9px;border:2px solid var(--live-bg);border-radius:50%;background:#0caf79}
.live-search-panel{height:48px;margin:0 15px 8px;padding:0 12px;display:flex;align-items:center;gap:8px;border:1px solid #e5ded5;border-radius:15px;background:#fffdfa;box-shadow:0 7px 18px rgba(50,40,29,.06)}
.live-search-panel[hidden]{display:none}
.live-search-panel .ui-icon{width:18px;height:18px;flex:0 0 auto;color:#6f7772}
.live-search-panel input{min-width:0;height:100%;flex:1;border:0;outline:0;color:#303934;background:transparent;font-size:15px}
.live-search-panel button{height:32px;padding:0 5px;color:var(--live-green);font-size:12px;font-weight:750}
.live-category-tabs{padding:4px 15px 11px;display:flex;gap:18px;overflow-x:auto;border-bottom:1px solid rgba(59,50,40,.07);scrollbar-width:none}
.live-category-tabs::-webkit-scrollbar{display:none}
.live-category-tabs button{position:relative;min-width:max-content;height:34px;padding:0 1px;flex:0 0 auto;color:#707672;font-size:13px;font-weight:700}
.live-category-tabs button.active{color:#121816;font-weight:850}
.live-category-tabs button.active::after{content:"";position:absolute;left:20%;right:20%;bottom:-3px;height:3px;border-radius:2px;background:var(--live-green)}
.live-list-main{padding:17px 15px calc(104px + env(safe-area-inset-bottom))}
.live-list-section-head{margin-bottom:13px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.live-list-section-head>div:first-child{min-width:0}
.live-list-section-head h2{margin:0;display:flex;align-items:center;gap:7px;font-family:Georgia,"Noto Serif SC",serif;font-size:18px}
.live-list-section-head h2 i{width:8px;height:8px;border-radius:50%;background:var(--live-red);box-shadow:0 0 0 4px rgba(237,65,86,.1)}
.live-list-section-head p{margin:5px 0 0;color:#989c98;font-size:10px}
.live-list-actions{display:flex;align-items:center;gap:7px}
.live-list-actions button,.live-list-actions a{height:34px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:4px;border:1px solid #ded8cf;border-radius:10px;background:#fffdfa;color:#5f6662;font-size:11px;font-weight:750}
.live-list-actions a{border-color:var(--live-green);color:#fff;background:var(--live-green)}
.live-list-actions span{font-size:15px;line-height:1}
.live-stream-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
.live-stream-card{min-width:0;overflow:hidden;border:1px solid #e7dfd5;border-radius:15px;background:var(--live-card);box-shadow:0 7px 18px rgba(49,41,31,.08)}
.live-stream-card[hidden]{display:none}
.live-stream-cover{position:relative;height:206px;display:block;overflow:hidden;background:#283a32}
.live-stream-cover>img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease}
.live-stream-card:hover .live-stream-cover>img{transform:scale(1.025)}
.live-stream-shade{position:absolute;inset:35% 0 0;background:linear-gradient(0deg,rgba(8,15,12,.73),transparent);pointer-events:none}
.live-stream-cover>b,.live-stream-cover>small,.live-stream-cover>em{position:absolute;z-index:2;color:#fff;font-style:normal}
.live-stream-cover>b{left:8px;top:8px;height:22px;padding:0 7px;display:flex;align-items:center;gap:4px;border-radius:7px;background:var(--live-red);font-size:9px;letter-spacing:.04em}
.live-stream-cover>b i{width:5px;height:5px;border-radius:50%;background:#fff}
.live-stream-cover>small{right:8px;top:8px;height:22px;padding:0 7px;display:flex;align-items:center;gap:4px;border-radius:7px;background:rgba(17,26,22,.64);font-size:9px;font-weight:750;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.live-stream-cover>small .ui-icon{width:11px;height:11px}
.live-stream-cover>em{left:9px;right:9px;bottom:8px;display:flex;align-items:center;gap:4px;overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.live-stream-cover>em .ui-icon{width:12px;height:12px}
.live-stream-copy{min-width:0;padding:9px;display:grid;grid-template-columns:31px minmax(0,1fr);align-items:center;gap:7px}
.live-host-mark{width:31px;height:31px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;color:#fff;background:linear-gradient(145deg,#16a078,#065f48);box-shadow:0 0 0 1px #d5e7df;font-size:12px;font-weight:850}
.live-stream-copy>span:last-child{min-width:0;display:grid}
.live-stream-copy strong{overflow:hidden;font-size:12px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.live-stream-copy small{margin-top:2px;overflow:hidden;color:#8a8f8b;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.live-list-empty{margin:30px 0;padding:25px;border:1px dashed #d7cec3;border-radius:15px;color:#858b86;background:#fffdf9;font-size:12px;text-align:center}
.live-list-empty[hidden]{display:none}
.live-list-status{position:fixed;left:50%;bottom:100px;z-index:50;max-width:min(310px,calc(100vw - 36px));margin:0;padding:9px 14px;border-radius:18px;color:#fff;background:rgba(35,47,41,.94);font-size:12px;opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity .2s ease,transform .2s ease}
.live-list-status.show{opacity:1;transform:translate(-50%,0)}
.live-list-topbar a:focus-visible,.live-list-topbar button:focus-visible,.live-search-panel:focus-within,.live-category-tabs button:focus-visible,.live-list-actions a:focus-visible,.live-list-actions button:focus-visible,.live-stream-card:focus-visible{outline:3px solid rgba(7,134,95,.26);outline-offset:2px}
@media(max-width:390px){.live-list-topbar{padding-left:10px;padding-right:10px;grid-template-columns:36px minmax(0,1fr) 34px 34px 36px;gap:3px}.live-list-topbar h1{font-size:18px}.live-category-tabs{padding-left:11px;padding-right:11px;gap:16px}.live-list-main{padding-left:11px;padding-right:11px}.live-stream-grid{gap:9px 7px}.live-stream-cover{height:188px}.live-list-actions button,.live-list-actions a{padding:0 8px}}
@media(min-width:600px){.live-stream-cover{height:310px}.live-stream-copy{padding:12px}.live-stream-copy strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.live-stream-cover>img,.live-list-status{transition:none}}