:root{
  --bg:#0f1229;
  --bg2:#171a3f;
  --surface:#121633;
  --card:#171a3f;
  --line:#2a3070;
  --text:#e9ecff;
  --muted:#b8c0ff;
  --primary:#7cf7ff;   /* neon cyan */
  --accent:#ffd166;     /* gold */
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(1200px 600px at 20% -10%, #1b1f49 0%, var(--bg) 50%) fixed,
              linear-gradient(180deg, var(--bg) 0%, #0b0e23 100%);
  color:var(--text);
  font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(160%) blur(8px);
  background:rgba(15,18,41,.6);
  border-bottom:1px solid rgba(124,247,255,.18);
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem .9rem;
}
.branding{display:flex;gap:.55rem;align-items:center}
.branding img{border-radius:8px; box-shadow:0 0 24px rgba(124,247,255,.25)}
.brand-text{
  font-weight:900; letter-spacing:.06em;
  background:linear-gradient(90deg,var(--primary),#9effe6,var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  font-size:1.05rem;
}
.top-links a{
  color:var(--text); text-decoration:none; margin-left:.9rem; opacity:.9; font-size:.95rem;
}
.top-links a:hover{opacity:1; color:var(--primary)}
.cta{
  padding:.45rem .7rem; border-radius:.75rem; font-weight:800;
  background:linear-gradient(90deg,var(--primary),#9effe6);
  color:#06141a !important; box-shadow:var(--shadow);
}
.cta-small{padding:.4rem .65rem}

/* Ticker */
.ticker{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden; background:rgba(23,26,63,.55);
}
.ticker-track{
  display:inline-block; white-space:nowrap; padding:.5rem 0;
  animation:ticker 28s linear infinite;
}
.ticker-track span{margin-right:2.2rem; color:var(--muted); font-size:.95rem}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Hero */
.hero{padding:1.4rem .9rem 1rem; background:radial-gradient(900px 500px at 100% -40%, rgba(124,247,255,.18), transparent 70%)}
.hero-content{max-width:980px;margin:0 auto;text-align:center}
.hero h1{font-size:clamp(1.2rem,2.4vw,2.1rem);margin:.2rem 0 .5rem}
.hero p{color:var(--muted);max-width:840px;margin:0 auto;font-size:1rem}

/* Controls */
.controls{max-width:1100px;margin:.6rem auto;padding:0 .9rem}
.search-wrap{position:relative; display:flex; align-items:center}
#searchInput{
  width:100%; padding:.7rem 2.4rem .7rem .8rem; border-radius:.8rem;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
}
#searchInput:focus{outline:none; border-color:var(--primary)}
.clear-btn{
  position:absolute; right:.3rem; background:transparent; border:0; color:var(--muted);
  font-size:1rem; cursor:pointer; padding:.3rem .5rem; border-radius:.5rem;
}
.filters{display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.6rem}
.filter-chip{
  border:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.02);
  padding:.35rem .65rem; border-radius:999px; cursor:pointer; user-select:none; font-size:.92rem;
}
.filter-chip.active{border-color:var(--primary); color:#06141a; background:linear-gradient(90deg,var(--primary),#9effe6);}

/* List (mobile-first) */
.list-wrap{max-width:1100px;margin:0 auto;padding:0 .9rem 1.2rem}
.apps-list{display:flex; flex-direction:column; gap:8px}
.row{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--line); border-radius:14px; padding:8px;
  box-shadow:var(--shadow);
}
.row:hover{border-color:rgba(124,247,255,.5)}
.row .icon{
  flex:0 0 52px; width:52px; height:52px; border-radius:12px; overflow:hidden;
  background:var(--surface); display:flex; align-items:center; justify-content:center;
}
.row .icon img{width:100%; height:100%; object-fit:cover}
.row .meta{flex:1 1 auto; min-width:0}
.row .name{
  font-weight:800; font-size:.98rem; line-height:1.15;
}
.row .name a{color:var(--text); text-decoration:none}
.row .name a:hover{color:var(--primary)}
.row .desc{
  color:var(--muted); font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.row .actions{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .7rem; border-radius:.65rem; border:1px solid var(--line);
  color:var(--text); background:rgba(255,255,255,.02); text-decoration:none; font-weight:800;
  font-size:.92rem;
}
.btn:hover{border-color:var(--primary)}
.btn-primary{background:linear-gradient(90deg,var(--primary),#9effe6); color:#06141a; border-color:transparent}

/* Tighten on small screens */
@media (max-width: 480px){
  .row{padding:8px}
  .row .icon{width:46px; height:46px; border-radius:10px}
  .row .name{font-size:.95rem}
  .row .desc{font-size:.82rem}
  .btn{padding:.45rem .6rem; font-size:.9rem}
}

/* Pagination */
.pagination{display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:.8rem}
.page-btn{
  background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--text);
  padding:.45rem .8rem; border-radius:.6rem; cursor:pointer;
}
.page-btn:disabled{opacity:.5; cursor:not-allowed}
.page-info{color:var(--muted); font-size:.95rem}
.no-results{text-align:center; color:var(--muted); padding:.8rem 0}

/* SEO block */
.seo-block{max-width:980px;margin:1.2rem auto 1.6rem;padding:0 .9rem}
.seo-block h2{margin-bottom:.3rem}
.seo-block p{color:var(--muted)}
.seo-points{list-style:none; padding:0; margin:.5rem 0}
.seo-points li{margin:.25rem 0}
.seo-note{margin-top:.5rem}

/* FAQ */
.faq{max-width:980px;margin:0 auto 1.6rem;padding:0 .9rem}
.faq details{
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px;
  padding:.65rem .85rem; margin:.5rem 0;
}
.faq summary{cursor:pointer; font-weight:800}
.faq p{color:var(--muted); margin:.35rem 0 0}

/* Footer */
.site-footer{
  border-top:1px solid var(--line); background:rgba(10,12,28,.9);
  padding:1rem; margin-top:1.1rem;
}
.footer-inner{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; max-width:980px; margin:0 auto; flex-wrap:wrap}
.legal a{color:var(--muted); text-decoration:none; margin-right:1rem}
.disclaimer{max-width:980px; margin:.6rem auto 0; color:var(--muted); font-size:.92rem}
.dmca{max-width:980px; margin:.5rem auto 0}

/* Floating mini video */
#floating-video{
  position:fixed; right:12px; bottom:84px; z-index:60;
  width:130px; height:auto; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 26px rgba(124,247,255,.35); border:1px solid rgba(124,247,255,.35);
}
#promoVideo{display:block; width:100%; height:auto; border-radius:12px}
@media (max-width: 420px){
  #floating-video{right:10px; bottom:90px; width:110px}
}

/* ============= NAV: perfect alignment (mobile + desktop) ============= */
/* 让右侧链接一行显示、间距一致、垂直居中 */
.site-header{
  column-gap: 12px;
}
.top-links{
  display:flex;
  align-items:center;
  gap:1.1rem;           /* 用 gap 统一间距 */
  white-space:nowrap;   /* 防止换行到第二行 */
}
.top-links a{           /* 移除之前用 margin-left 的做法，避免不均匀 */
  margin-left:0 !important;
  line-height:1;        /* 文字居中更“齐” */
}

/* 超小屏时允许两行，但保持整齐：品牌在上，链接在下并右对齐 */
@media (max-width: 420px){
  .site-header{flex-wrap:wrap; padding:.55rem .7rem;}
  .branding{order:1; flex:1 0 100%;}
  .top-links{
    order:2; width:100%;
    justify-content:flex-end;
    gap:.85rem;
  }
  .brand-text{font-size:.98rem;}
  .top-links a{font-size:.92rem;}
}

/* 中等屏开始放大些字号和间距，保持一行右对齐 */
@media (min-width: 421px) and (max-width: 860px){
  .top-links{gap:1rem;}
  .top-links a{font-size:.95rem;}
}

/* 桌面：极稳一行右对齐 */
@media (min-width: 861px){
  .top-links{gap:1.2rem;}
}

/* ============= LIST ROW: icon/name/desc/download 完全对齐 ============= */
/* 统一按钮最小宽度，按钮右侧对齐；图标等高等宽；文字行高一致 */
.row{min-height:64px;}
.row .icon{width:52px;height:52px;}
.row .name{line-height:1.15;}
.row .desc{line-height:1.1;}
.row .actions{
  min-width: 112px;            /* 让每行按钮列宽度一致 */
  justify-content:flex-end;
}
.btn{min-width:110px; text-align:center;}
@media (max-width: 480px){
  .row{padding:8px}
  .row .icon{width:46px;height:46px;}
  .btn{min-width:96px; padding:.44rem .6rem; font-size:.9rem;}
  .row .actions{min-width:100px;}
}

/* ============= LIST 宽度对齐（边线齐平） ============= */
.list-wrap{padding-left:.9rem; padding-right:.9rem;}
.apps-list{gap:10px;} /* 每行卡片间距一致 */