*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--bg:#050d14;--card:#0d1a26;--bd:#16293a;--tx:#fff;--mut:#7d8c9b;--c1:#00d4ff;--c2:#2979ff}
html,body{background:radial-gradient(120% 60% at 50% 0%,#0b3b4f 0%,#071822 40%,#050d14 100%) fixed;color:var(--tx);font-family:Roboto,system-ui,sans-serif;min-height:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 16px;background:rgba(5,13,20,.7);position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px}
.brand b{background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;color:transparent}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#1ec8ff,#2a6bff);box-shadow:0 0 14px #1ec8ff66}
main{padding:12px 14px 90px}
.search{display:flex;align-items:center;gap:10px;background:rgba(13,26,38,.8);border:1px solid var(--bd);border-radius:30px;padding:0 20px;height:56px;margin-top:6px}
.search input{flex:1;background:none;border:0;outline:0;color:#fff;font-size:18px}
.search input::placeholder{color:var(--mut)}
.search.small{height:44px;margin:10px 16px;padding:0 16px}
.search.small input{font-size:15px}
.chips{display:flex;gap:10px;overflow-x:auto;padding:16px 2px 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:10px 20px;border-radius:30px;background:rgba(13,26,38,.8);border:1px solid var(--bd);color:#9fb0c0;font-weight:600;font-size:16px}
.chip.on{background:linear-gradient(90deg,var(--c1),var(--c2));color:#fff;border-color:transparent;box-shadow:0 0 16px #00d4ff66}
.count{text-align:center;color:var(--mut);margin:10px 0 14px;font-size:16px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:18px;overflow:hidden;cursor:pointer;position:relative}
.card .th{height:120px;background:linear-gradient(180deg,#0e2a3a,#0b1f2c);display:flex;align-items:center;justify-content:center;position:relative}
.card .th img{max-width:82px;max-height:82px;object-fit:contain}
.card .th .ini{font-size:34px;font-weight:700;color:#cfe8f5}
.live{background:#e8212e;color:#fff;font-style:normal;font-weight:700;font-size:11px;padding:3px 8px 3px 6px;border-radius:12px;letter-spacing:.3px}
.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:5px;vertical-align:1px}
.card .live{position:absolute;top:8px;left:8px}
.fav{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:50%;background:#050d14cc;display:flex;align-items:center;justify-content:center}
.fav svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2}
.fav.on svg{fill:#ffc400;stroke:#ffc400}
.card .nm{padding:14px 14px 4px;font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .ct{padding:0 14px 16px;color:var(--mut);font-size:15px;margin-top:14px}
.tg{position:fixed;right:18px;bottom:22px;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#2aa3f2,#1c7ed6);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px #0008;z-index:6}
.hidden{display:none!important}
.player{position:fixed;inset:0;background:#000;z-index:20;display:flex;flex-direction:column;overflow:hidden}
.pbar{display:flex;align-items:center;padding:14px 16px;position:relative;height:64px}
.ptitle{position:absolute;left:0;right:0;text-align:center;display:flex;justify-content:center;align-items:center;gap:12px;font-weight:700;font-size:19px;pointer-events:none}
.pbar .ib{z-index:2}
.ib{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px}
.ib.txt{font-weight:700;font-size:18px}
.stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:0}
.stage video{width:100%;max-height:100%;background:#000}
.center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}
.bigplay{width:120px;height:120px;border-radius:50%;background:rgba(40,40,40,.75);border:2px solid #ffffff55;display:flex;align-items:center;justify-content:center}
.lbl{background:rgba(40,40,40,.85);padding:5px 16px;border-radius:20px;font-weight:700;font-size:15px;letter-spacing:1px}
.msg{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#ffd27a;font-size:14px;padding:0 20px}
.ctrl{display:flex;justify-content:space-between;align-items:center;padding:12px 18px 18px}
.ctrl .l,.ctrl .r{display:flex;align-items:center;gap:14px}
.drawer{position:absolute;top:0;right:0;bottom:0;width:68%;background:#07121b;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s;z-index:3;box-shadow:-10px 0 30px #000a}
.drawer.open{transform:none}
.dh{display:flex;justify-content:space-between;align-items:center;padding:20px 18px 0 26px;font-size:20px}
.dlist{flex:1;overflow-y:auto;padding:0 14px 20px}
.it{padding:14px 20px;border-radius:16px;cursor:pointer;margin-bottom:2px}
.it span{display:block;font-size:19px}
.it small{color:var(--mut);font-size:15px}
.it.on{background:linear-gradient(90deg,var(--c1),var(--c2))}
.it.on small{color:#e6f6ff}
.drawer .chips{padding:14px 16px 0}
@media(min-width:700px){.grid{grid-template-columns:repeat(5,1fr)}.drawer{width:380px}}