:root{--bg:#0b0b0f;--panel:rgba(255,255,255,.06);--stroke:rgba(255,255,255,.14);--t:#f5f5f7;--m:rgba(245,245,247,.65);--a:#ff5a00;--e:cubic-bezier(.2,.9,.2,1)}
html[data-theme="light"]{--bg:#f6f7fb;--panel:rgba(0,0,0,.05);--stroke:rgba(0,0,0,.12);--t:#0c0e14;--m:rgba(12,14,20,.65)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--t);font-family:"Proxima Nova",system-ui,-apple-system,Segoe UI,Roboto,Arial}
@font-face{font-family:"Proxima Nova";src:local("Proxima Nova");font-display:swap;}
.app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px;background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,.25),transparent);backdrop-filter:blur(12px)}
html[data-theme="light"] .topbar{background:linear-gradient(180deg,rgba(246,247,251,.98),rgba(246,247,251,.75),transparent)}
.brand{display:flex;align-items:center;gap:8px;font-weight:950}
.dot{width:10px;height:10px;border-radius:999px;background:var(--a);box-shadow:0 0 18px rgba(255,90,0,.5)}
.pill{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--stroke);background:var(--panel);color:var(--m)}
.topTabs{display:flex;gap:8px}
.topTab{border:1px solid var(--stroke);background:var(--panel);color:var(--m);padding:6px 10px;border-radius:999px;font-size:13px}
.topTab.isActive{border-color:rgba(255,90,0,.35);background:rgba(255,90,0,.18);color:var(--a);font-weight:900}
.iconBtn{border:1px solid var(--stroke);background:var(--panel);color:var(--t);width:38px;height:38px;border-radius:12px}
.main{flex:1;position:relative}
.page{display:none;padding:10px 12px 86px}
.page.isActive{display:block}
.bottomNav{position:sticky;bottom:0;z-index:20;display:flex;justify-content:space-around;padding:10px 6px 12px;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.25));backdrop-filter:blur(12px)}
html[data-theme="light"] .bottomNav{background:linear-gradient(0deg,rgba(246,247,251,.98),rgba(246,247,251,.80))}
.navItem{border:none;background:transparent;color:var(--m);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px}
.navItem .ico{font-size:18px}
.navItem.isActive{color:var(--a)}
.card{border:1px solid var(--stroke);background:var(--panel);border-radius:18px;padding:12px;margin:10px 0}
.muted{color:var(--m);font-size:12.5px;line-height:1.35}
.searchInput{border:1px solid var(--stroke);background:var(--panel);color:var(--t);padding:10px 12px;border-radius:14px;outline:none;width:100%}
.btn{border:1px solid var(--stroke);background:rgba(255,255,255,.08);color:var(--t);padding:10px 12px;border-radius:14px;font-weight:800}
.btn.primary{background:var(--a);border-color:rgba(255,90,0,.55);color:#fff}
.row2{display:flex;gap:10px;align-items:center;justify-content:space-between}
.clipStage{height:calc(100dvh - 128px);position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--stroke);background:#000}
.reelStack{position:absolute;inset:0;will-change:transform;transform:translate3d(0,0,0)}
.reel{position:absolute;inset:0}
.reel video{width:100%;height:100%;object-fit:cover}
.overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 42%,rgba(0,0,0,.72))}
.meta{position:absolute;left:12px;bottom:96px;z-index:5;width:calc(100% - 120px)}
.title{font-weight:1000}
.sub{margin-top:4px;color:rgba(255,255,255,.76);font-size:13px}
.actions{position:absolute;right:10px;bottom:98px;z-index:6;display:flex;flex-direction:column;gap:12px}
.actionBtn{width:52px;height:52px;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.28);color:#fff}
.watchNow{position:absolute;left:12px;bottom:18px;z-index:6;border:none;background:var(--a);color:#fff;border-radius:16px;padding:12px 14px;font-weight:1000}
.friendBanner{position:absolute;left:12px;bottom:66px;z-index:6;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.30);color:rgba(255,255,255,.88);font-size:11.5px}
.banner{position:absolute;left:12px;right:12px;top:68px;z-index:10;display:none;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.24);backdrop-filter:blur(10px);color:rgba(255,255,255,.88);font-size:12.5px}
.banner.isShow{display:block;animation:bin .25s var(--e)}
@keyframes bin{from{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.50);display:flex;align-items:flex-end;justify-content:center;z-index:80}
.drawer.isHidden{display:none}
.sheet{width:100%;max-width:520px;border-radius:22px 22px 0 0;border:1px solid var(--stroke);border-bottom:none;background:rgba(20,20,26,.92);backdrop-filter:blur(18px);padding:12px}
.option{display:flex;gap:10px;align-items:center;padding:12px;border-radius:16px;border:1px solid var(--stroke);background:var(--panel);margin-top:10px}
.logo{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-weight:1000}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.70);color:#fff;font-size:12.5px;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:90}
.toast.isShow{opacity:1}
.heart{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%) scale(.3);font-size:84px;color:rgba(255,255,255,.92);opacity:0;pointer-events:none;z-index:95}
.heart.isShow{animation:hpop .6s var(--e) forwards}
@keyframes hpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-58%) scale(.88)}}
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin-top:10px}
.hero{position:relative;height:260px;border-radius:20px;overflow:hidden;border:1px solid var(--stroke);background:#000}
.hero video{width:100%;height:100%;object-fit:cover}
.heroOv{position:absolute;inset:0;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.76))}
.heroT{font-size:26px;font-weight:1000}
.strip{display:flex;gap:10px;overflow-x:auto;padding:8px 0}
.poster{min-width:152px;height:214px;border-radius:16px;overflow:hidden;border:1px solid var(--stroke);background:var(--panel);position:relative}
.poster img{width:100%;height:100%;object-fit:cover}
.poster span{position:absolute;left:10px;bottom:10px;right:10px;font-weight:950;text-shadow:0 6px 18px rgba(0,0,0,.55)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100}
.modal.isHidden{display:none}
.modalCard{width:calc(100% - 28px);max-width:420px;border-radius:22px;border:1px solid var(--stroke);background:rgba(20,20,26,.92);backdrop-filter:blur(18px);padding:14px}