:root{--bg:#07070c;--acc:#7cf5d4;--heart:#ff6aa8;--gbg:rgba(255,255,255,.07);--gline:rgba(255,255,255,.14);--segon:rgba(124,245,212,.22);--gblur:28px}
#app{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}
.glow{position:absolute;left:50%;top:6%;width:120vw;height:60vh;margin-left:-60vw;background:center/cover;filter:blur(70px) saturate(1.8);opacity:0;transition:opacity 1s;transform:translateZ(0);border-radius:50%}.glow.on{opacity:.5}
.grain{position:absolute;inset:0;background:radial-gradient(70% 40% at 50% 0,rgba(124,245,212,.08),transparent),linear-gradient(transparent 60%,rgba(0,0,0,.5));pointer-events:none}
header{position:relative;z-index:6;display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 18px 4px}
.brand{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:14px}.brand svg{color:var(--acc);font-size:20px}
.sbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:19px}
.searchbar{position:absolute;z-index:8;left:14px;right:14px;top:calc(8px + env(safe-area-inset-top));height:50px;transform:translateY(-140%);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.2,1),opacity .3s}.searchbar.on{transform:none;opacity:1}
.searchbar button{font-size:18px;opacity:.7;padding:6px}
.stage{position:relative;flex:1;min-height:0;perspective:1100px;touch-action:pan-y;margin-top:8px}
.cc{position:absolute;left:50%;top:6%;width:var(--cw);height:calc(var(--cw)*1.32);margin-left:calc(var(--cw)/-2);will-change:transform;-webkit-box-reflect:below 6px linear-gradient(transparent 72%,rgba(255,255,255,.22))}
.cov{position:absolute;inset:0;border-radius:26px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 24px 50px -16px #000;background:#15151f}
.cov img{width:100%;height:100%;object-fit:cover}.cov::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.22),transparent 35%,transparent 65%,rgba(255,255,255,.06));pointer-events:none}
.panel{position:relative;z-index:5;margin:0 14px 10px;padding:16px 18px;border-radius:28px;display:grid;gap:12px;min-height:178px}
.panel .head{display:flex;align-items:center;gap:10px}.panel h2{font-size:25px;letter-spacing:-.025em;line-height:1.1}.panel .sub{font-size:13px;opacity:.6;margin-top:2px}
.panel .heart{margin-left:auto;flex:none;width:46px;height:46px}
.mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.mini div{padding:9px 10px;border-radius:15px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.mini small{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;opacity:.5}.mini b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tags{display:flex;gap:6px;overflow:auto;scrollbar-width:none;margin:0 -2px}.tags::-webkit-scrollbar{display:none}.tags span{flex:none;padding:5px 11px;border-radius:99px;font-size:12px;background:rgba(124,245,212,.12);color:#baf9e8}
.swap{animation:swap .5s cubic-bezier(.2,.8,.2,1)}@keyframes swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dock{position:relative;z-index:6;margin:0 14px calc(12px + env(safe-area-inset-bottom));padding:6px;border-radius:999px}.dock .seg{padding:0}.dock .seg button{padding:12px 4px}
.dots{margin-left:auto;font-size:11px;letter-spacing:.14em;opacity:.45;font-variant-numeric:tabular-nums;z-index:4}