:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--t:#fff;--t2:rgba(255,255,255,.75);--g:rgba(255,255,255,.18);--gb:rgba(255,255,255,.4);--acc:#4aa3ff;
--bg:radial-gradient(circle at 15% 10%,#7fd3ff 0,transparent 45%),radial-gradient(circle at 85% 35%,#c58bff 0,transparent 45%),radial-gradient(circle at 30% 95%,#ff9ad5 0,transparent 45%),#3b6fe0}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--g:rgba(255,255,255,.1);--gb:rgba(255,255,255,.25);--bg:radial-gradient(circle at 15% 10%,#1f6fa8 0,transparent 45%),radial-gradient(circle at 85% 35%,#5b2f9c 0,transparent 45%),radial-gradient(circle at 30% 95%,#9c2f6e 0,transparent 45%),#0d1530}}
:root[data-theme=dark]{--g:rgba(255,255,255,.1);--gb:rgba(255,255,255,.25);--bg:radial-gradient(circle at 15% 10%,#1f6fa8 0,transparent 45%),radial-gradient(circle at 85% 35%,#5b2f9c 0,transparent 45%),radial-gradient(circle at 30% 95%,#9c2f6e 0,transparent 45%),#0d1530}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100%;background:var(--bg) fixed;color:var(--t);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
.app{max-width:480px;margin:0 auto;padding:16px 16px 110px}
.glass{background:var(--g);border:1px solid var(--gb);border-radius:28px;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 12px 32px rgba(20,30,80,.25)}
.brand{display:flex;align-items:center;gap:14px;padding:16px 20px;margin-bottom:16px}
.logo{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#7fd3ff,#2f6bff);display:grid;place-items:center;box-shadow:inset 0 2px 4px rgba(255,255,255,.7),0 6px 16px rgba(47,107,255,.5)}
.brand h1{margin:0;font-size:32px;letter-spacing:-1px;line-height:1}.brand p{margin:4px 0 0;font-size:13px;color:var(--t2)}
.view{display:none;animation:in .45s cubic-bezier(.2,.9,.3,1.1)}.view.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.in{display:flex;gap:8px;padding:8px;margin-bottom:16px}
.in input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--t);font-size:15px;padding:0 12px}
.in input::placeholder{color:var(--t2)}
.btn{border:1px solid var(--gb);background:var(--g);color:var(--t);border-radius:20px;padding:12px 16px;font:600 14px inherit;font-family:inherit;cursor:pointer;transition:transform .25s cubic-bezier(.2,.9,.3,1.4)}
.btn:active{transform:scale(.94)}.btn.p{background:linear-gradient(135deg,#5cc0ff,#2f6bff);border-color:rgba(255,255,255,.5);box-shadow:0 6px 16px rgba(47,107,255,.45)}
.btn.w{width:100%;margin-top:14px;padding:15px}
.thumb{position:relative;margin:10px;border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(160deg,#6ec6ff,#2c7a9c 55%,#2f5d3a)}
.play{position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;background:rgba(0,0,0,.35);border:2px solid #fff;display:grid;place-items:center}
.dur{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.35);padding:4px 10px;border-radius:12px;font-size:13px}
.meta{padding:6px 18px 0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#ffb3d9,#8bb7ff);flex:none}
.cap{padding:10px 18px;font-size:17px;font-weight:600;line-height:1.35}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px 10px 14px}
.st{text-align:center;padding:12px 2px;border-radius:20px;background:var(--g);border:1px solid var(--gb);font-size:11px;color:var(--t2)}
.st b{display:block;color:var(--t);font-size:14px;margin-bottom:2px}
h2{font-size:17px;margin:22px 6px 10px}
.item{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:10px;border-radius:22px}
.item .th{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#6ec6ff,#2f5d3a);flex:none;display:grid;place-items:center}
.item div.i{flex:1;min-width:0}.item b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item small{color:var(--t2);font-size:12px}
.ok{width:32px;height:32px;border-radius:50%;background:#34c77b;display:grid;place-items:center;flex:none}
.empty{text-align:center;color:var(--t2);padding:30px 10px;font-size:14px}
.prof{text-align:center;padding:26px 18px}
.pic{width:112px;height:112px;border-radius:50%;object-fit:cover;border:3px solid var(--gb);box-shadow:0 10px 28px rgba(0,0,0,.3);display:block;margin:0 auto 12px}
.prof h3{margin:0;font-size:22px}.prof p{margin:4px 0 0;color:var(--t2);font-size:13px}
.row{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:10px;border-radius:22px;color:var(--t);text-decoration:none}
.ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none}
.row .i{flex:1;min-width:0}.row small{display:block;color:var(--t2);font-size:12px}.row b{font-size:15px;word-break:break-all}
.desc{padding:18px;font-size:14px;line-height:1.6;color:var(--t2)}.desc b{color:var(--t);display:block;font-size:16px;margin-bottom:6px}
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));width:min(448px,calc(100% - 32px));display:flex;padding:8px;border-radius:32px;z-index:5}
.nav button{flex:1;background:none;border:0;color:var(--t2);display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;font:600 12px inherit;font-family:inherit;border-radius:24px;cursor:pointer;transition:.35s}
.nav button.on{color:#fff;background:rgba(255,255,255,.25);box-shadow:inset 0 1px 1px rgba(255,255,255,.6)}
.toast{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%,-90px);padding:12px 20px;font-size:14px;z-index:9;transition:transform .5s cubic-bezier(.2,.9,.3,1.3);white-space:nowrap}
.toast.on{transform:translate(-50%,0)}
svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

body::before,body::after{content:"";position:fixed;width:46vmax;height:46vmax;border-radius:50%;filter:blur(60px);opacity:.45;z-index:-1;animation:fl 14s ease-in-out infinite alternate}
body::before{background:#7fd3ff;top:-15vmax;left:-15vmax}body::after{background:#ff8ad8;bottom:-18vmax;right:-15vmax;animation-delay:-6s}
@keyframes fl{to{transform:translate(12vmax,10vmax) scale(1.2)}}
#splash{position:fixed;inset:0;z-index:99;background:var(--bg);display:grid;place-items:center;transition:opacity .7s,transform .7s;text-align:center}
#splash.off{opacity:0;transform:scale(1.15);pointer-events:none}
#splash .logo{width:96px;height:96px;border-radius:30px;margin:0 auto 16px;animation:pop 1s cubic-bezier(.2,.9,.3,1.4) both,bob 2.4s 1s ease-in-out infinite}
#splash h1{margin:0;font-size:40px;letter-spacing:-1.5px;animation:in .8s .3s both}#splash p{margin:6px 0 0;color:var(--t2);animation:in .8s .5s both}
.bar{width:140px;height:5px;border-radius:5px;background:var(--g);margin:22px auto 0;overflow:hidden}.bar i{display:block;height:100%;width:0;background:#fff;border-radius:5px;animation:ld 1.6s .3s forwards}
@keyframes pop{from{transform:scale(0) rotate(-120deg)}}@keyframes bob{50%{transform:translateY(-8px)}}@keyframes ld{to{width:100%}}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rp .6s ease-out forwards;pointer-events:none}
@keyframes rp{to{transform:scale(1);opacity:0}}
.btn,.nav button,.row,.item,.st{position:relative;overflow:hidden}
.st,.item,.row{transition:transform .3s cubic-bezier(.2,.9,.3,1.4)}.st:active,.row:active{transform:scale(.93)}
.nav{overflow:visible}.pill{position:absolute;top:8px;bottom:8px;left:8px;width:calc((100% - 16px)/3);border-radius:24px;background:rgba(255,255,255,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.7);transition:transform .5s cubic-bezier(.2,.9,.3,1.25);z-index:0}
.nav button{z-index:1}.nav button.on{background:none;box-shadow:none}.nav button.on svg{animation:bn .5s}
@keyframes bn{40%{transform:translateY(-6px) scale(1.2)}}
.view{touch-action:pan-y}
.vid{position:relative;margin:10px;border-radius:22px;overflow:hidden;aspect-ratio:9/12;max-height:62vh;background:#000;cursor:pointer}
.vid video{width:100%;height:100%;object-fit:cover;display:block}
.vid .play{transition:.35s}.vid.pl .play{opacity:0;transform:scale(1.6)}
.live{position:absolute;top:10px;left:10px;background:rgba(255,40,80,.85);padding:4px 10px;border-radius:12px;font-size:12px;font-weight:700;display:none}.vid.pl .live{display:block;animation:bl 1.2s infinite}
@keyframes bl{50%{opacity:.5}}
.prog{position:absolute;left:12px;right:12px;bottom:10px;height:4px;border-radius:4px;background:rgba(255,255,255,.3)}.prog i{display:block;height:100%;width:0;background:#ff5a4a;border-radius:4px}
.chip{background:var(--g);border:1px solid var(--gb);border-radius:14px;padding:5px 10px;font-size:12px;font-weight:500}
.meta{flex-wrap:wrap}.av{background-size:cover;border:1px solid var(--gb)}
.st svg{width:20px;height:20px;display:block;margin:0 auto 4px}
.dl{position:relative;overflow:hidden}.dl .fill{position:absolute;inset:0;width:0;background:rgba(255,255,255,.35);transition:width .2s}
.dl span{position:relative}
.empty{padding:34px 16px}.empty .big{font-size:38px;display:block;margin-bottom:8px;animation:bob 3s ease-in-out infinite}
.rm{position:absolute;right:0;top:0;bottom:0;width:90px;background:#ff4d5e;display:grid;place-items:center;font-weight:700}
.sw{position:relative;margin-bottom:10px;border-radius:22px;overflow:hidden}.sw .item{margin:0;transition:transform .3s;touch-action:pan-y}
.st1{animation:in .5s both}
.fx{position:fixed;width:9px;height:9px;border-radius:3px;z-index:50;pointer-events:none}

.glass:not(.toast):not(.nav){position:relative}
.glass:not(.toast):not(.nav)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(200px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.3),transparent 62%);opacity:0;transition:opacity .35s}
.glass.hot::after{opacity:1}
.view{animation:in2 .5s cubic-bezier(.2,.9,.3,1.1)}@keyframes in2{from{opacity:0;transform:translateX(var(--dx,0)) scale(.98)}to{opacity:1;transform:none}}
.in{margin-bottom:12px}#go{margin:0 0 16px;padding:16px;font-size:16px}
.btn.p::before{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:sh 3.2s ease-in-out infinite;z-index:1;pointer-events:none}
@keyframes sh{0%,60%{left:-80px}100%{left:120%}}
.btn.ld{animation:pu 1.1s ease-in-out infinite}@keyframes pu{50%{transform:scale(.985);filter:brightness(1.15)}}
.btn:disabled{cursor:wait}
.empty .big{width:44px;height:44px;margin:0 auto 10px;display:block;opacity:.85}
.chip svg{width:13px;height:13px}.live{padding-left:10px}
.okfx{position:fixed;inset:0;display:grid;place-items:center;z-index:60;pointer-events:none;animation:ofx 1.7s forwards}
.okfx svg{width:128px;height:128px;padding:20px;border-radius:50%;background:var(--g);border:1px solid var(--gb);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);stroke:#fff;stroke-width:3;fill:none;overflow:visible}
.okfx circle{stroke-dasharray:152;stroke-dashoffset:152;animation:dr .7s forwards}.okfx path{stroke-dasharray:40;stroke-dashoffset:40;animation:dr .4s .5s forwards}
@keyframes dr{to{stroke-dashoffset:0}}@keyframes ofx{0%{opacity:0;transform:scale(.5)}20%{opacity:1;transform:scale(1.08)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.2)}}