/* css/style.css —— 首页 + 详情页共用样式（移动端优先，系统字体栈） */

:root{
  --brand:#1677ff;--brand2:#4096ff;--ink:#1a1a1a;--sub:#666;
  --line:#eaeaea;--bg:#f5f7fb;--gold:#f5b301;--hot:#ff4d4f;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;font-size:14px;
}
img{display:block;max-width:100%;}
a{color:var(--brand);text-decoration:none;}

/* ============ 首页（max-width:840px）============ */
.container{max-width:840px;margin:0 auto;padding:0 12px 80px;}
.header{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-radius:0 0 18px 18px;padding:22px 16px 18px;text-align:center;}
.header h1{font-size:22px;letter-spacing:.5px;}
.header .sub{opacity:.92;font-size:12.5px;margin-top:6px;}
.stats-row{display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding:0 2px;}
.stats{display:flex;gap:12px;flex:1;flex-wrap:wrap;}
.stat{flex:1;min-width:70px;background:rgba(255,255,255,.85);border-radius:10px;padding:8px 4px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.05);}
.stat b{display:block;font-size:16px;color:#2c7be5;}
.stat span{font-size:11px;color:#555;}
.banner{flex:none;width:88px;height:88px;margin-left:20px;border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.8);box-shadow:0 4px 12px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;}
.banner img{width:72%;height:auto;object-fit:contain;}

/* 滚动条 */
.ticker{background:#fff;border-radius:12px;padding:8px 12px;margin:10px 0;display:flex;align-items:center;gap:10px;box-shadow:0 2px 8px rgba(22,119,255,.06);}
.ticker .dot{width:9px;height:9px;border-radius:50%;background:var(--hot);flex:none;animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.ticker .lab{flex:none;font-size:12px;color:var(--hot);font-weight:700;white-space:nowrap;}
.tk{overflow:hidden;flex:1;position:relative;height:18px;}
.tk .tk-inner{position:absolute;left:0;top:0;white-space:nowrap;font-size:12px;color:var(--sub);will-change:transform;}

/* 区块标题 */
.sec-title{font-size:16px;font-weight:800;margin:16px 4px 10px;display:flex;align-items:center;gap:8px;}
.sec-title .bar{width:4px;height:16px;background:var(--brand);border-radius:3px;}

/* 排行榜卡片 */
.rank{display:flex;flex-direction:column;gap:10px;}
.card{background:#fff;border-radius:14px;padding:12px;display:flex;gap:12px;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.04);position:relative;overflow:hidden;cursor:pointer;}
.card .medal{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;flex:none;}
.m-gold{background:linear-gradient(135deg,#f5b301,#f7d56e);}
.m-silver{background:linear-gradient(135deg,#b7b7b7,#dedede);}
.m-bronze{background:linear-gradient(135deg,#cd7f32,#e6a96b);}
.m-normal{background:var(--brand);}
.ico{width:48px;height:48px;border-radius:12px;background:#f0f4ff;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;}
.ico img{width:40px;height:40px;object-fit:contain;}
.info{flex:1;min-width:0;}
.name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.name{font-size:15px;font-weight:800;}
.tags{display:flex;gap:6px;flex-wrap:wrap;}
.tag{font-size:10px;padding:2px 7px;border-radius:10px;background:#eef4ff;color:var(--brand);}
.tag.hot{background:#fff1f0;color:var(--hot);}
.desc{font-size:12px;color:var(--sub);margin-top:4px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.stars{font-size:12px;color:var(--gold);margin-top:3px;}
.dl{flex:none;}
.dl a{display:inline-block;padding:9px 16px;background:var(--brand);color:#fff;border-radius:22px;font-size:13px;font-weight:700;min-width:44px;text-align:center;transition:transform .15s;}
.dl a:active{transform:scale(.95);}

/* 折叠 */
.fold{background:#fff;border-radius:14px;margin-top:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.fold>header{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;cursor:pointer;user-select:none;}
.fold>header .tt{font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:8px;}
.fold .arr{transition:transform .25s;font-size:12px;color:var(--sub);}
.fold.open .arr{transform:rotate(180deg);}
.fold .body{padding:0 14px;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;}
.fold.open .body{max-height:2000px;padding:0 14px 14px;}
.intro-box{background:#f0f4ff;border-radius:10px;padding:12px;font-size:13px;color:#334;}
.intro-box h3{font-size:14px;margin-bottom:6px;}
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px;}
.g4{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12px;}
.g4 b{display:block;margin-bottom:3px;}

/* Tabs */
.tabs{display:flex;background:#fff;border-radius:14px;padding:6px;gap:6px;margin-top:10px;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.tab{flex:1;text-align:center;padding:9px 6px;border-radius:10px;font-size:13px;color:var(--sub);font-weight:700;cursor:pointer;border:none;background:transparent;transition:.2s;}
.tab.active{background:var(--brand);color:#fff;}
.tab-panel{display:none;background:#fff;border-radius:14px;margin-top:8px;padding:14px;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.tab-panel.show{display:block;animation:fade .3s;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}

/* 黑马 */
.horse{display:flex;flex-direction:column;gap:8px;}
.hrow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:9px 11px;box-shadow:0 1px 5px rgba(0,0,0,.03);}
.hrank{width:22px;height:22px;border-radius:6px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:none;}
.hname{flex:1;font-weight:700;font-size:13px;}
.hup{font-size:11px;color:#16a34a;font-weight:700;}

/* ============ 详情页（max-width:640px）============ */
.app-container{max-width:640px;margin:0 auto;padding:0 12px 60px;}
.app-header{position:sticky;top:0;background:#fff;padding:12px 4px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);z-index:10;}
.back{color:var(--brand);font-size:14px;padding:4px 8px;}
.app-title{font-size:16px;font-weight:700;}
.app-hero{background:#fff;border-radius:16px;padding:18px 16px;text-align:center;margin-top:12px;box-shadow:0 2px 10px rgba(0,0,0,.05);}
.app-icon{width:72px;height:72px;border-radius:16px;background:#f0f4ff;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;overflow:hidden;}
.app-icon img{width:60px;height:60px;object-fit:contain;}
.app-meta h1{font-size:20px;font-weight:800;}
.app-tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0;}
.app-rating{font-size:13px;color:var(--sub);}
.app-rating b{color:var(--gold);}
.app-lead{font-size:13px;color:var(--sub);margin-top:12px;text-align:left;}
.app-section{background:#fff;border-radius:14px;padding:14px;margin-top:12px;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.app-section h2{font-size:15px;font-weight:800;margin-bottom:8px;padding-left:8px;border-left:3px solid var(--brand);}
.app-section p{font-size:13px;color:var(--ink);margin-bottom:8px;}
.feature-list,.step-list{padding-left:18px;}
.feature-list li,.step-list li{font-size:13px;color:var(--ink);margin-bottom:6px;}
.step-list{list-style:none;counter-reset:step;}
.step-list li{counter-increment:step;position:relative;padding-left:28px;}
.step-list li::before{content:counter(step);position:absolute;left:0;top:1px;width:20px;height:20px;background:var(--brand);color:#fff;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;}

/* 下载按钮（仅顶部一个，无底部条） */
.btn-download{display:inline-block;padding:9px 20px;background:var(--brand);color:#fff;border:none;border-radius:22px;font-size:13px;font-weight:700;cursor:pointer;transition:transform .15s;}
.btn-download:active{transform:scale(.95);}

/* 相关推荐 */
.related{display:flex;flex-direction:column;gap:8px;}
.rel{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;}
.rname{flex:1;font-weight:700;font-size:13px;}
.rgo{color:var(--brand);font-size:12px;}

/* 免责声明 / footer */
.disclaimer{background:#fff7ed;border:1px solid #ffd8b8;color:#9a4b1a;border-radius:10px;padding:10px;font-size:11.5px;margin-top:14px;}
footer{text-align:center;font-size:11px;color:#999;margin-top:18px;}

/* Toast */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#333;color:#fff;padding:9px 16px;border-radius:20px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:99;}
.toast.show{opacity:1;}

/* ============ 全局：图标未放时隐藏破损图标，防闪烁 ============ */
img[onerror]{display:none !important;}
.ico:empty,.banner:empty{background:transparent;border-color:transparent;box-shadow:none;}

@media(max-width:380px){
  .header h1{font-size:19px;}
  .name{font-size:14px;}
  .dl a{padding:8px 13px;}
}