:root{--red:#c62828;--red-d:#8e0000;--red-l:#e53935;--gold:#ffd54f;--gold-d:#f9a825;
--ink:#222;--muted:#666;--line:#eee;--bg:#f6f6f8}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
background:var(--bg);color:var(--ink);line-height:1.6;font-size:16px;padding-bottom:76px}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-d)}
.container{max-width:900px;margin:0 auto;padding:0 14px}
@keyframes blinkBtn{0%,100%{background:#16a34a;box-shadow:0 2px 10px rgba(22,163,74,.45)}
50%{background:#22c55e;box-shadow:0 2px 16px rgba(34,197,94,.75)}}
.btn-blink{display:inline-block;padding:13px 32px;border-radius:999px;font-weight:800;
font-size:1rem;color:#fff;animation:blinkBtn 1.6s ease-in-out infinite}
.btn-blink:hover{color:#fff}
/* header */
.site-header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{display:flex;align-items:center;gap:8px}
.logo-badge{width:34px;height:34px;border-radius:50%;flex:none;
background:radial-gradient(circle at 30% 25%,var(--red-l),var(--red-d));display:flex;align-items:center;
justify-content:center;color:var(--gold);font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.05rem}
.logo-text{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.15rem;color:var(--red)}
.logo-text span{color:var(--gold-d)}
.nav{display:flex;gap:14px}
.nav a{color:#444;font-size:.9rem;font-weight:700}
.nav a:hover{color:var(--red)}
/* breadcrumbs */
.crumbs{font-size:.83rem;color:#888;padding:12px 0}
/* app hero */
.app-hero{background:linear-gradient(135deg,var(--red-d),var(--red) 55%,var(--red-l));color:#fff;padding:24px 0 28px}
.app-hero .wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.app-hero .wrap>div:last-child{flex:1;min-width:220px}
.app-icon{width:84px;height:84px;font-size:2rem;border-radius:20px;flex:none;
background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#5d3a00;display:flex;align-items:center;
justify-content:center;font-family:'Baloo 2',sans-serif;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.app-hero h1{font-family:'Baloo 2',sans-serif;font-size:clamp(1.25rem,3.4vw,1.8rem);line-height:1.3;font-weight:800}
.app-hero .sub{color:#ffd9d2;font-size:.9rem;margin-top:4px}
.app-hero .stars{color:var(--gold-d);font-size:.85rem;letter-spacing:1px;margin-top:4px}
.app-hero .stars .safe{color:#b9f6ca;font-weight:800;font-size:.78rem}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:20px}
.spec div{background:rgba(0,0,0,.22);border:1px solid rgba(255,213,79,.4);border-radius:12px;
padding:10px 12px;text-align:center}
.spec b{display:block;font-size:1.1rem;color:var(--gold)}
.spec span{font-size:.78rem;color:#ffd9d2}
/* sections */
section{padding:26px 0 8px}
section.white{background:#fff;margin-top:18px;padding:26px 0}
h2.sec{font-family:'Baloo 2',sans-serif;font-size:clamp(1.15rem,3vw,1.5rem);margin:0 0 10px;
color:var(--red-d);font-weight:800}
.prose{max-width:820px}
.prose p{margin:0 0 12px;font-size:.94rem}
/* info table */
.table-wrap{overflow-x:auto;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.07);
border:1px solid var(--line);max-width:820px}
table{width:100%;border-collapse:collapse}
.info-table th{padding:10px 12px;text-align:left;background:#fdf1ef;color:var(--red-d);width:44%;
font-size:.88rem;border-bottom:1px solid #f0f0f0}
.info-table td{padding:10px 12px;border-bottom:1px solid #f0f0f0;font-size:.92rem}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:none}
/* steps */
.steps{display:grid;gap:10px;max-width:820px}
.step{background:#fafafa;border-radius:12px;padding:12px 14px;border:1px solid var(--line);
display:flex;gap:12px;align-items:flex-start}
.step .num{width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;
display:flex;align-items:center;justify-content:center;font-size:.85rem;flex:none;margin-top:2px}
.step .txt{font-size:.94rem}
.step b{color:var(--red)}
/* faq */
.faq{max-width:820px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden}
.faq summary{padding:13px 16px;font-weight:700;cursor:pointer;list-style:none;position:relative;font-size:.94rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;color:var(--red);font-size:1.15rem}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 16px 13px;color:var(--muted);font-size:.9rem}
.faq .a p{margin:0}
/* notice */
.notice.red{background:#fdeeec;border:1px solid #efc4bd;border-left:5px solid #c0392b;border-radius:10px;
padding:12px 16px;font-size:.86rem;color:#7c2d22;max-width:820px}
/* related */
.rel-links{display:flex;flex-wrap:wrap;gap:8px}
.rel-links a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;
font-size:.84rem;font-weight:700;color:#444}
.rel-links a:hover{border-color:var(--red);color:var(--red)}
.rel-links a.all{color:var(--red);font-weight:800}
/* footer */
footer{background:#2a0a0a;color:#d9aba3;padding:28px 0 90px;margin-top:10px;font-size:.86rem;
border-top:3px solid var(--red)}
footer h4{color:var(--gold);margin:0 0 8px;font-size:.92rem;font-family:'Baloo 2',sans-serif}
footer a{color:#d9aba3}
footer a:hover{color:var(--gold)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:18px}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.foot-bottom{border-top:1px solid #4a1a12;padding-top:14px;font-size:.78rem;color:#a97e73}
.foot-bottom p{margin:0}
.foot-bottom p+p{margin-top:8px}
.age-badge{display:inline-block;background:#c0392b;color:#fff;font-weight:800;border-radius:6px;
padding:2px 8px;font-size:.78rem;margin-right:8px}
/* sticky cta */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:2px solid var(--red);
box-shadow:0 -4px 16px rgba(0,0,0,.12);padding:9px 14px;display:flex;gap:12px;align-items:center;
justify-content:center;z-index:60}
.sticky-cta .t{font-weight:700;font-size:.88rem;color:var(--ink);min-width:0}
.sticky-cta .t small{display:block;color:#888;font-weight:500;font-size:.72rem}
.sticky-cta .btn-blink{padding:11px 26px;font-size:.95rem;flex:none;white-space:nowrap}
@media(max-width:560px){.sticky-cta .t{font-size:.8rem}.sticky-cta .btn-blink{padding:10px 18px;font-size:.88rem}}
/* ===== index (方案D) ===== */
.hero{background:linear-gradient(135deg,var(--red-d),var(--red) 55%,var(--red-l));color:#fff;
padding:26px 0 30px;text-align:center}
.hero h1{font-family:'Baloo 2',sans-serif;font-size:clamp(1.25rem,3.8vw,1.9rem);line-height:1.3;
margin:0 auto 10px;font-weight:800}
.hero h1 .hl{color:var(--gold)}
.hero p{max-width:720px;margin:0 auto 14px;color:#ffd9d2;font-size:.95rem}
/* hero carousel */
.carousel{position:relative;max-width:720px;margin:0 auto 14px;border-radius:12px;overflow:hidden;
box-shadow:0 6px 20px rgba(0,0,0,.35)}
.carousel .slides{display:flex;transition:transform .5s ease}
.carousel .slides a{flex:0 0 100%;display:block;line-height:0}
.carousel .slides img{width:100%;height:auto;display:block}
.carousel .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:7px}
.carousel .dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;
background:rgba(255,255,255,.55)}
.carousel .dot.on{background:var(--gold);width:22px;border-radius:999px}
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.badge{background:rgba(0,0,0,.25);border:1px solid rgba(255,213,79,.5);color:#ffe082;
padding:4px 12px;border-radius:999px;font-size:.8rem;font-weight:700}
.updated{font-size:.78rem;color:#f5b5aa;margin-top:12px}
.sec-sub{color:#777;margin:0 0 14px;max-width:820px;font-size:.92rem}
/* featured top3 */
.featured3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.feat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,.07);display:flex;flex-direction:column;align-items:center;gap:6px}
.top-tag{background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#5d3a00;font-size:.68rem;
font-weight:800;padding:2px 10px;border-radius:999px;letter-spacing:.4px}
.feat .icon{width:58px;height:58px;border-radius:14px;flex:none;display:flex;align-items:center;
justify-content:center;color:var(--gold);font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.5rem;
background:radial-gradient(circle at 30% 25%,var(--red-l),var(--red-d));box-shadow:0 3px 8px rgba(142,0,0,.35)}
.feat b{font-size:.88rem;line-height:1.25}
.feat .stars{color:var(--gold-d);font-size:.75rem;letter-spacing:1px}
.feat .safe{color:#16a34a;font-size:.72rem;font-weight:800}
.feat .btn-blink{display:block;width:100%;box-sizing:border-box;padding:11px 0;font-size:.95rem;text-align:center}
/* comparison table */
.table-wrap.cmp{max-width:none}
.cmp table{min-width:640px}
.cmp th{padding:10px 12px;text-align:left;background:var(--red);color:#fff;font-size:.85rem;white-space:nowrap}
.cmp td{padding:10px 12px;border-bottom:1px solid #f0f0f0;font-size:.92rem}
.cmp tr:last-child td{border-bottom:none}
.bonus-tag{color:#16a34a;font-weight:800}
.tbl-btn{display:inline-block;background:#16a34a;color:#fff;font-weight:800;padding:5px 14px;
border-radius:999px;font-size:.8rem;white-space:nowrap}
.tbl-btn:hover{color:#fff}
/* search */
.searchbar{display:flex;gap:10px;margin-bottom:14px}
.searchbar input{flex:1;padding:11px 16px;border-radius:999px;border:2px solid #e5e5e5;font-size:.95rem;
outline:none;background:#fff;font-family:inherit;color:var(--ink)}
.searchbar input:focus{border-color:var(--red)}
/* app list rows */
.applist{display:flex;flex-direction:column;gap:10px}
.rowcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
box-shadow:0 2px 8px rgba(0,0,0,.06);display:flex;align-items:center;gap:12px;
transition:transform .15s,box-shadow .15s}
.rowcard:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(198,40,40,.14)}
.rowcard .rank{width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:.75rem;
font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.rowcard .icon{width:52px;height:52px;border-radius:12px;flex:none;display:flex;align-items:center;
justify-content:center;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.35rem;color:var(--gold);
background:radial-gradient(circle at 30% 25%,var(--red-l),var(--red-d));box-shadow:0 2px 6px rgba(142,0,0,.3)}
.rowcard .info{flex:1;min-width:0}
.rowcard h3{font-size:.98rem;line-height:1.25;margin:0;font-weight:800}
.rowcard h3 a{color:var(--ink)}
.rowcard h3 a:hover{color:var(--red)}
.rowcard .l1{font-size:.8rem;color:#555;font-weight:700}
.rowcard .l1 span{color:#16a34a}
.rowcard .l2{font-size:.76rem;color:#888}
.rowcard .btn-blink{flex:none;padding:11px 26px;font-size:.95rem;white-space:nowrap}
/* editorial prose */
.prose ul{margin:0 0 12px 20px;padding:0;font-size:.94rem}
.prose li{margin-bottom:5px}
.prose h3{font-family:'Baloo 2',sans-serif;color:var(--red);margin:18px 0 6px;font-size:1.08rem;font-weight:700}
/* real app icons */
img.icon,img.app-icon{object-fit:cover;background:#fff}
.rowcard>a{flex:none;line-height:0}
.feat>a{line-height:0}
img.logo-badge{object-fit:cover;background:#fff;border-radius:50%}
@media(max-width:560px){
 .nav{gap:10px}
 .nav a{font-size:.83rem}
 .rowcard .btn-blink{padding:10px 16px;font-size:.86rem}
 .feat .btn-blink{padding:10px 0;font-size:.86rem}
}