/* 简单移动端样式，仿截图配色 */
:root{
	--bg-top:#f6fbff;
	--bg-bottom:#f6fbff;
	--card:#fff;
	--muted:#888;
	--accent:#2386e6;
}
*{box-sizing:border-box}
html,body{
	height:100%;
	margin:0;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", Arial;
	background: var(--bg-top);
	color:#222;
}
.container{
	padding:32px 24px;
	background:var(--card);
	
	box-shadow:0 4px 16px rgba(0,0,0,0.06);
	max-width:400px;
	margin:40px auto;
}
.hero{padding:100px 16px 18px; display:flex; align-items:center; justify-content:center}
.hero-center{display:flex;flex-direction:column;align-items:center;max-width:760px;text-align:center}
.app-icon{
	width:80px;
	height:80px;
	border-radius:16px;
	background:#e6f0fa;
	object-fit:cover;
	margin-bottom:18px;
	box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.title{
	margin:0;
	font-size:1.7em;
	font-weight:700;
	color:#222;
	text-align:center;
}
.company{font-size:14px;color:var(--accent);margin-top:8px}
.company a{color:var(--accent);text-decoration:none}
.category{margin-top:8px;color:var(--accent);font-size:14px}
.desc{
	font-size:1em;
	color:#444;
	margin-top:12px;
	line-height:1.6;
	max-width:720px;
	text-align:center;
}
.desc.short{
	max-width:640px;
	font-size:0.92em;
}
.badges{display:flex;gap:18px;justify-content:center;margin-top:14px;margin-bottom:18px}
.badge{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.badge-icon{
	display:inline-block;
	width:22px;
	height:22px;
	border-radius:6px;
	background:#e6f0fa;
	display:flex;
	align-items:center;
	justify-content:center;
}
.btn-share{
	background:var(--accent);
	border:none;
	color:#fff;
	padding:14px 0;
	border-radius:10px;
	font-weight:600;
	width:100%;
	font-size:1.15em;
	box-shadow:0 2px 8px rgba(34,134,230,0.08);
	margin-top:24px;
	cursor:pointer;
	transition:background 0.2s;
}
.btn-share:hover{
	background:#1766b2;
}
.btn-share.large{padding:14px 42px;border-radius:8px;font-size:18px}
.screenshots-card{padding:14px;border-radius:10px;margin-top:18px}
.screenshots-card h2{margin:0 0 12px 4px;font-size:14px}
.carousel{position:relative; overflow:hidden; border-radius:8px; background:transparent; padding:0}
.carousel-track{display:flex; transition:transform 300ms ease; will-change:transform}
.slide{min-width:70%; flex:0 0 70%; padding:6px; display:flex; align-items:center; justify-content:center}
.slide img{max-width:100%; max-height:80vh; width:auto; height:auto; object-fit:contain; border-radius:8px; display:block}
.carousel-btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.4); border:none; color:#fff; width:36px;height:36px;border-radius:18px;font-size:20px}
.carousel-btn.prev{left:8px}
.carousel-btn.next{right:8px}
.dots{display:flex; gap:6px; justify-content:center; padding:10px 0}
.dots button{
	width:8px;
	height:8px;
	border-radius:4px;
	background:#e0e0e0;
	border:none;
}
.dots button.active{background:var(--accent)}
@media (min-width:420px){
	.slide{min-width:45%;flex:0 0 45%}
}
@media (max-width:360px){
	.slide{min-width:85%;flex:0 0 85%}
}

/* 说明与其他信息 */
/* cards */
.desc-card, .other-info-card{
	background:#fff;
	padding:16px;
	border-radius:10px;
	margin-top:18px;
	box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.desc-card h2, .other-info-card h2{
	margin:0 0 12px 4px;
	font-size:18px;
	font-weight:700;
	color:#222;
}
.desc-card h2, .other-info-card h2{font-weight:700}
.desc-card h2{
	padding-bottom:10px;
	border-bottom:1px solid #e6f0fa;
}
.other-info-card h2{
	padding-bottom:10px;
	border-bottom:1px solid #e6f0fa;
}
.card-block{
	
	padding:14px;
	border-radius:8px;
	color:var(--muted);
	line-height:1.8;
}

.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding-top:12px}
.info-item{display:flex;gap:12px;align-items:flex-start;padding:8px;border-radius:6px}
.info-item{background:transparent}
.ii-icon{color:var(--muted);flex:0 0 28px;margin-top:4px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(255,255,255,0.02);width:34px;height:34px}
.ii-label{font-size:13px;color:var(--muted);margin-bottom:6px}
.ii-value{font-size:14px;color:var(--muted)}
.ii-value a{color:var(--accent);text-decoration:none}

@media (max-width:720px){
	.info-grid{grid-template-columns:1fr}
}