style: 重构系统与安全环境设置页面卡片布局样式

src/routes/admin/settings/+page.svelte

@@ -63,31 +63,28 @@
 
 <div class="settings-container">
 	{#if activeTab === 'basic'}
-		<div class="settings-card full-width">
+		<div class="env-cards-grid">
-			<h3 class="section-title">系统与安全环境</h3>
+			<div class="env-card">
-			<div class="info-grid" style="margin: 0;">
-				<div class="info-item">
 				<span class="label">驱动框架</span>
 				<span class="value">SvelteKit 5 + Cloudflare</span>
 			</div>
-				<div class="info-item">
+			<div class="env-card">
 				<span class="label">当前管理员</span>
 				<span class="value">{data.user?.email || '未知用户'}</span>
 			</div>
-				<div class="info-item">
+			<div class="env-card">
 				<span class="label">数据库绑定</span>
 				<span class="value"><span class="badge">{data.platformEnv}</span></span>
 			</div>
-				<div class="info-item">
+			<div class="env-card">
 				<span class="label">R2存储绑定</span>
 				<span class="value"><span class="badge">{data.r2Env}</span></span>
 			</div>
-				<div class="info-item">
+			<div class="env-card">
 				<span class="label">鉴权模式</span>
 				<span class="value">Cloudflare Access (Zero Trust)</span>
 			</div>
 		</div>
-		</div>
 
 		<form
 			method="POST"
@@ -393,28 +390,30 @@
 		flex-direction: column;
 	}
 
-	.info-grid {
+	.env-cards-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-		gap: 24px 20px;
+		gap: 16px;
-		background: transparent;
+		width: 100%;
-		padding: 10px 0;
-		border: none;
 	}
 
-	.info-item {
+	.env-card {
+		background: rgba(0, 0, 0, 0.03);
+		border: none;
+		border-radius: 0;
+		padding: 16px 20px;
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
 	}
 
-	.info-item .label {
+	.env-card .label {
 		color: var(--text-muted, rgba(0, 0, 0, 0.6));
 		font-size: 0.85rem;
 		font-weight: 500;
 	}
 
-	.info-item .value {
+	.env-card .value {
 		color: var(--text-color);
 		font-weight: 600;
 		font-size: 0.95rem;