/* ===== 设计令牌 ===== */
:root{
	--ink:#202634;
	--ink-2:#3a4257;
	--muted:#8a93a6;
	--line:rgba(30,40,70,.06);
	--card:#fff;
	--brand:#4a6cf7;
	--brand-2:#7b5cff;
	--shadow-sm:0 2px 10px rgba(30,42,74,.05);
	--shadow-md:0 8px 22px rgba(30,42,74,.09);
	--shadow-brand:0 8px 20px rgba(88,108,255,.18);
	--radius-lg:20px;
	--radius-md:16px;
}

html, body {
	-webkit-text-size-adjust: 100%;
}

body{
	margin:0;
	min-height:100vh;
	color:var(--ink);
	font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
	background:
		radial-gradient(1200px 600px at 15% -10%, #e9edff 0%, rgba(233,237,255,0) 60%),
		radial-gradient(1000px 520px at 90% 0%, #fdeeff 0%, rgba(253,238,255,0) 55%),
		#f3f5fa;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

#app{
	width:100%;
	max-width:760px;
	margin:0 auto;
	padding-bottom:8px;
}

/* ===== 头部 ===== */
.header{
	width:100%;
	box-sizing:border-box;
	padding:22px 22px 0;
}

.banner{
	position:relative;
	width:100%;
	box-sizing:border-box;
	height:clamp(150px,27vw,190px);
	margin-bottom:54px;
	padding:20px;
	border-radius:var(--radius-lg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50%;
	background-color:#0a1626;
	box-shadow:var(--shadow-md);
	overflow:visible;
}

/* 顶部图片轻微压暗，层次更立体 */
.banner::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	background:linear-gradient(180deg,rgba(10,22,38,.06) 0%,rgba(10,22,38,.34) 100%);
	pointer-events:none;
}

.logo{
	position:absolute;
	left:50%;
	bottom:-48px;
	width:96px;
	height:96px;
	margin-left:-48px;
	background-repeat:no-repeat;
	background-size:contain;
	background-color:#fff;
	border:4px solid #fff;
	border-radius:50%;
	box-shadow:0 10px 26px rgba(30,42,74,.18);
	z-index:2;
}

.logo img{
	width:100%;
	height:100%;
	display:block;
	border-radius:50%;
	-o-object-fit:cover;
	object-fit:cover;
}

.author-name{
	display:flex;
	width:100%;
	justify-content:center;
	align-items:center;
	padding-top:18px;
	margin-top:0;
	font-size:24px;
	line-height:33px;
	font-weight:600;
	letter-spacing:.6px;
	color:var(--ink);
}

.desc{
	width:100%;
	margin:8px 0 0;
	padding:0 12px;
	box-sizing:border-box;
	font-size:14px;
	line-height:20px;
	text-align:center;
	color:var(--muted);
}

/* ===== 主体 ===== */
.body{
	padding:0 22px;
}

/* 分段式标签栏 */
.tab-list{
	display:flex;
	align-items:center;
	width:100%;
	box-sizing:border-box;
	padding:5px;
	margin-top:20px;
	background:rgba(255,255,255,.72);
	border:1px solid rgba(255,255,255,.9);
	border-radius:16px;
	box-shadow:var(--shadow-sm);
	backdrop-filter:saturate(180%) blur(8px);
	-webkit-backdrop-filter:saturate(180%) blur(8px);
}

.tab-item{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:1 1 0;
	height:40px;
	padding:0 10px;
	box-sizing:border-box;
	background:transparent;
	border-radius:12px;
	font-size:14px;
	line-height:20px;
	font-weight:500;
	color:var(--ink-2);
	transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}

.tab-item:hover{
	color:var(--brand);
}

.tab-item.active{
	background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
	color:#fff;
	box-shadow:0 6px 16px rgba(88,108,255,.32);
}

.tab-item .text{
	margin-left:0;
	white-space:nowrap;
}

/* ===== 卡片列表 ===== */
.app-list{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-start;
	width:100%;
	box-sizing:border-box;
	padding:10px 0 6px;
	background:transparent;
}

.item{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	position:relative;
	width:50%;
	box-sizing:border-box;
	padding:8px;
	color:var(--ink);
}

.content-wrap{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	width:100%;
	box-sizing:border-box;
	padding:14px 15px;
	background:var(--card);
	border:1px solid var(--line);
	border-radius:var(--radius-md);
	box-shadow:var(--shadow-sm);
	transition:transform .25s ease,box-shadow .25s ease;
}

.item:hover .content-wrap{
	transform:translateY(-2px);
	box-shadow:var(--shadow-md);
}

.img-wrap{
	flex-shrink:0;
	display:flex;
	align-items:center;
	justify-content:center;
	width:38px !important;
	height:38px !important;
	margin-right:12px;
	border-radius:11px;
	background:#f4f6fc;
	overflow:hidden;
}

.img-wrap img{
	width:100% !important;
	height:100% !important;
	display:block;
	-o-object-fit:contain;
	object-fit:contain;
	border-radius:11px;
}

.app-name{
	width:100%;
	margin:0;
	font-size:15px;
	line-height:20px;
	font-weight:600;
	text-align:left;
	color:var(--ink);
	word-break:break-all;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}

/* ===== 主页「源码网站 / 接码网站」胶囊按钮 ===== */
.item[data-id="home_btn_1"],
.item[data-id="home_btn_2"]{
	width:auto;
	max-width:100%;
}

.item[data-id="home_btn_1"] .content-wrap,
.item[data-id="home_btn_2"] .content-wrap{
	position:relative;
	display:inline-flex;
	width:auto;
	padding:12px 44px 12px 14px;
	background:linear-gradient(135deg,#f2f6ff 0%,#fbf3ff 100%);
	border:1px solid rgba(120,145,255,.18);
	border-radius:18px;
	box-shadow:var(--shadow-brand);
	transition:box-shadow .25s ease,transform .25s ease;
}

.item[data-id="home_btn_1"]:hover .content-wrap,
.item[data-id="home_btn_2"]:hover .content-wrap{
	transform:translateY(-2px);
	box-shadow:0 12px 28px rgba(88,108,255,.24);
}

.item[data-id="home_btn_1"] .img-wrap,
.item[data-id="home_btn_2"] .img-wrap{
	width:42px !important;
	height:42px !important;
	margin-right:12px;
	border-radius:50%;
	background:#fff;
	border:2px solid #fff;
	box-shadow:0 3px 10px rgba(80,100,200,.18);
	overflow:hidden;
}

.item[data-id="home_btn_1"] .img-wrap img,
.item[data-id="home_btn_2"] .img-wrap img{
	border-radius:50% !important;
	-o-object-fit:cover;
	object-fit:cover;
}

.item[data-id="home_btn_1"] .app-name,
.item[data-id="home_btn_2"] .app-name{
	font-size:15px;
	font-weight:600;
	color:#2a3145;
	line-height:22px;
	white-space:nowrap;
	-webkit-line-clamp:1;
	display:block;
}

.item[data-id="home_btn_1"] .content-wrap::after,
.item[data-id="home_btn_2"] .content-wrap::after{
	content:"\2197";
	position:absolute;
	right:15px;
	top:50%;
	transform:translateY(-50%);
	font-size:15px;
	color:#8b93b8;
	transition:transform .25s ease,color .25s ease;
}

.item[data-id="home_btn_1"]:hover .content-wrap::after,
.item[data-id="home_btn_2"]:hover .content-wrap::after{
	transform:translateY(-50%) translate(2px,-2px);
	color:var(--brand);
}

/* 接码网站：图标与卡片位置（保留既有微调） */
.item[data-id="home_btn_2"] .img-wrap{
	margin-left:15px;
}

.item[data-id="home_btn_2"]{
	margin-left:24px;
}

/* ===== 联系页：三个按钮同一排 ===== */
.item[data-id="contact_btn_1"],
.item[data-id="6a2ba3cab2380"],
.item[data-id="contact_btn_tg"]{
	width:33.3333%;
}

.item[data-id="contact_btn_1"] .content-wrap,
.item[data-id="6a2ba3cab2380"] .content-wrap,
.item[data-id="contact_btn_tg"] .content-wrap{
	padding:14px 10px;
}

.item[data-id="contact_btn_1"] .img-wrap,
.item[data-id="6a2ba3cab2380"] .img-wrap,
.item[data-id="contact_btn_tg"] .img-wrap{
	width:30px !important;
	height:30px !important;
	margin-right:8px;
	border-radius:9px;
}

.item[data-id="contact_btn_1"] .app-name,
.item[data-id="6a2ba3cab2380"] .app-name,
.item[data-id="contact_btn_tg"] .app-name{
	font-size:14px;
	white-space:nowrap;
	-webkit-line-clamp:1;
	display:block;
}

/* ===== 页脚 ===== */
.footer{
	padding:26px 16px 26px;
	text-align:center;
	font-size:12px;
	line-height:18px;
	color:#9aa3b5;
	letter-spacing:.2px;
}

/* ===== 小屏适配 ===== */
@media (max-width:600px){
	#app{max-width:100%;}
	.header{padding:16px 16px 0;}
	.banner{height:152px;border-radius:18px;margin-bottom:52px;}
	.logo{width:88px;height:88px;margin-left:-44px;bottom:-46px;}
	.author-name{font-size:22px;padding-top:16px;}
	.body{padding:0 16px;}
	.item{padding:7px;}
	.content-wrap{padding:13px 14px;}
	.img-wrap{width:36px !important;height:36px !important;margin-right:10px;}
	.app-name{font-size:14px;}
	.item[data-id="home_btn_2"]{margin-left:12px;}
	.item[data-id="contact_btn_1"] .app-name,
	.item[data-id="6a2ba3cab2380"] .app-name,
	.item[data-id="contact_btn_tg"] .app-name{font-size:13px;}
}

@media (prefers-reduced-motion:reduce){
	.content-wrap,.tab-item,.item[data-id="home_btn_1"] .content-wrap,.item[data-id="home_btn_2"] .content-wrap{transition:none;}
	.item:hover .content-wrap{transform:none;}
}