:root{
  --bg:#05070f; --panel:#0b0f1d; --line:rgba(255,255,255,.08); --soft:rgba(255,255,255,.045);
  --text:#f2f5ff; --mute:#8a93b2; --dim:#555e7e;
  --a:#38bdf8; --b:#8b5cf6; --grad:linear-gradient(135deg,#38bdf8,#6366f1 55%,#8b5cf6);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.5 Inter,system-ui,sans-serif;min-height:100vh;padding-top:var(--safe-t)}
h1,h2,h3{font-family:Sora,Inter,sans-serif;margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
[hidden]{display:none!important}
img{display:block}
:focus-visible{outline:2px solid var(--a);outline-offset:2px}

/* splash */
#splash{position:fixed;inset:0;z-index:999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:opacity .45s}
#splash.out{opacity:0;pointer-events:none}
#splash img{width:104px;height:104px;border-radius:50%;box-shadow:0 0 60px rgba(99,102,241,.55);margin-bottom:18px}
#splash h1{font-size:26px;letter-spacing:.2em;font-weight:800}
#splash h1 b,.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
#splash p{margin:0 0 26px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
#splash .bar{width:140px;height:3px;border-radius:9px;background:var(--soft);overflow:hidden}
#splash .bar i{display:block;height:100%;width:40%;background:var(--grad);border-radius:9px;animation:load 1.3s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* layout */
#app{display:flex;min-height:100vh;padding-bottom:calc(92px + var(--safe-b))}
.main{flex:1;min-width:0;width:100%;max-width:1180px;margin:0 auto;padding:16px 16px 24px}
.side{display:none}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 1px var(--line),0 0 18px rgba(99,102,241,.35)}
.brand h1{font-size:19px;font-weight:700;line-height:1.1}
.brand p{margin:2px 0 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.avatar img{width:38px;height:38px;border-radius:50%;border:2px solid rgba(56,189,248,.55)}

.search{position:relative;display:block;margin-bottom:18px}
.search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:16px}
.search input{width:100%;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:12px 14px 12px 40px;color:var(--text);font:inherit;font-size:14.5px}
.search input::placeholder{color:var(--dim)}
.search input:focus{outline:none;border-color:rgba(56,189,248,.5)}

/* banner */
.banner{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:2/1;border:1px solid var(--line);margin-bottom:26px;background:var(--panel)}
.slides{display:flex;height:100%;transition:transform .55s cubic-bezier(.3,.7,.2,1)}
.slide{flex:0 0 100%;position:relative;display:flex;align-items:flex-end;padding:18px;cursor:pointer;overflow:hidden;isolation:isolate}
.slide::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 85% 20%,var(--c) 0,transparent 60%),linear-gradient(135deg,#0a1024,#05070f);opacity:.9;z-index:-2}
.slide .big{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:44%;max-width:300px;aspect-ratio:1;border-radius:26%;object-fit:cover;opacity:.95;box-shadow:0 20px 60px rgba(0,0,0,.55);z-index:-1}
.slide>div:last-child{position:relative;max-width:58%}
.slide .tag{display:inline-block;background:var(--grad);color:#fff;font:700 11px/1 Sora,sans-serif;padding:6px 11px;border-radius:99px;margin-bottom:8px}
.slide h3{font-size:clamp(18px,4.8vw,30px);font-weight:800;line-height:1.1;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.slide p{margin:4px 0 14px;font-size:13px;color:#cfd6f0}
.dots{position:absolute;right:14px;bottom:10px;display:flex;gap:6px}
.dots i{width:7px;height:7px;border-radius:9px;background:rgba(255,255,255,.3);transition:.3s}
.dots i.on{width:24px;background:var(--a)}

/* list */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 8px}
.sec-head h2{font-size:21px;font-weight:700;display:flex;gap:10px;align-items:center}
.sec-head span{color:var(--a);font-size:13px;font-weight:600}
#list{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.card{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
.ico-wrap{position:relative;flex:none}
.app-ico{width:68px;height:68px;border-radius:19px;object-fit:cover;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.app-ico.ph{background:linear-gradient(145deg,var(--c),#0a1024);color:#fff;font-size:30px;border:1px solid rgba(255,255,255,.12)}
.card .info{flex:1;min-width:0}
.card h3{font-size:16.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev{display:flex;align-items:center;gap:6px;color:var(--mute);font-size:12.5px;margin-top:1px}
.dev i{color:#4c9bff;font-size:14px}
.meta{font-size:12.5px;color:var(--dim);margin-top:2px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.meta .st{color:#fbbf24}
.act{flex:none;text-align:center}
.get{display:block;min-width:76px;padding:9px 16px;border-radius:99px;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.38);color:var(--a);font:700 13px Sora,sans-serif}
.get:active{transform:scale(.94)}
.soon{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.35);color:#fbbf24}
.act small{display:block;font-size:10.5px;color:var(--dim);margin-top:5px}
.badge{position:absolute;top:-5px;right:-5px;width:20px;height:20px;border-radius:50%;background:#f59e0b;color:#000;font:800 12px/20px Sora;text-align:center}

#empty{text-align:center;padding:64px 16px}
#empty .ico{width:84px;height:84px;margin:0 auto 20px;border-radius:26px;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;font-size:36px;color:var(--mute)}
#empty h3{font-size:19px}
#empty p{color:var(--dim);margin:6px 0 20px}
#clearBtn{padding:11px 26px;border-radius:14px;border:1px solid rgba(56,189,248,.4);color:var(--a);font-weight:600}

/* tabbar */
.tabbar{position:fixed;left:14px;right:14px;bottom:calc(14px + var(--safe-b));z-index:50;display:flex;background:rgba(11,15,29,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:24px;padding:8px;max-width:520px;margin:0 auto}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;border-radius:16px;color:var(--dim);font-size:11.5px;font-weight:500;position:relative}
.tab i{font-size:24px}
.tab.on{color:var(--a)}
.tab.on::after{content:"";position:absolute;bottom:2px;width:18px;height:3px;border-radius:9px;background:var(--grad)}

/* detail */
.dhead{display:flex;align-items:center;justify-content:space-between;padding:6px 0 14px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.dhead button{display:flex;align-items:center;gap:6px;color:var(--a);font:600 17px Sora,sans-serif}
.dhead .r{display:flex;gap:18px;font-size:24px;color:var(--a)}
.dhead .r .on{color:#fbbf24}
.hero{display:flex;gap:16px;align-items:center;margin:18px 0}
.hero .app-ico{width:104px;height:104px;border-radius:28px;font-size:46px}
.hero h2{font-size:25px;font-weight:800;line-height:1.1}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{padding:6px 14px;border-radius:99px;background:var(--soft);border:1px solid var(--line);color:var(--mute);font-size:13px}
.chip.hi{border-color:rgba(251,191,36,.4);color:#fbbf24;background:rgba(251,191,36,.08)}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px;border-radius:20px;font:800 18px Sora,sans-serif;margin-bottom:12px}
.cta.main-cta{background:var(--grad);color:#fff;box-shadow:0 10px 34px rgba(99,102,241,.4)}
.cta.main-cta:active{transform:scale(.98)}
.cta.alt{background:var(--soft);border:1px solid var(--line);font-weight:600;font-size:17px}
.cta.dis{background:var(--soft);border:1px dashed var(--line);color:var(--mute);cursor:default}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.stat{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:16px 8px;text-align:center}
.stat small{display:block;color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.stat b{display:block;font:700 22px Sora;margin:5px 0 2px}
.stat span{font-size:12px;color:var(--dim)}
.dsec{margin-top:26px}
.dsec h3{font-size:21px;margin-bottom:12px}
.about{background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:20px;color:#c3cae6;line-height:1.7}
.related{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.related::-webkit-scrollbar{display:none}
.rel{flex:none;width:84px;text-align:center;font-size:12px;color:var(--mute)}
.rel .app-ico{width:72px;height:72px;margin:0 auto 6px}
.rel span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#toast{position:fixed;left:50%;bottom:calc(110px + var(--safe-b));transform:translate(-50%,20px);background:#151b33;border:1px solid var(--line);padding:11px 18px;border-radius:14px;font-size:13.5px;opacity:0;pointer-events:none;transition:.3s;z-index:400;max-width:90vw}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* desktop */
@media(min-width:1024px){
  #app{padding-bottom:0}
  .side{display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:268px;background:#080b16;border-right:1px solid var(--line);padding:26px 18px;gap:18px;z-index:40}
  .side .brand h1{font-size:16px;letter-spacing:.08em}
  .side .search{margin:0}
  .sidenav{display:flex;flex-direction:column;gap:4px;flex:1}
  .sidenav .tab{flex-direction:row;gap:12px;padding:11px 14px;font-size:14px;font-weight:600;border-radius:12px;justify-content:flex-start}
  .sidenav .tab i{font-size:19px}
  .sidenav .tab.on{background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.22)}
  .sidenav .tab.on::after{display:none}
  .side-links{display:flex;flex-direction:column;gap:8px}
  .side-links a{display:flex;gap:10px;align-items:center;padding:11px 14px;border-radius:12px;background:var(--soft);border:1px solid var(--line);font-size:13.5px;font-weight:600}
  .main{margin-left:268px;max-width:none;padding:30px 40px}
  .main>section{max-width:1100px;margin:0 auto}
  .top,.mobile-search,.tabbar{display:none}
  #list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px}
  .banner{aspect-ratio:16/5}
  .slide{padding:30px 36px}
  .slide .big{max-width:340px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}