/*
	在线工具页 - 暗色主题
	与主页风格统一
*/

/* ============ Variables ============ */
:root {
	--bg-dark: #1a1a1a;
	--bg-card: rgba(255, 255, 255, 0.04);
	--bg-card-hover: rgba(255, 255, 255, 0.08);
	--text-primary: #ffffff;
	--text-secondary: rgba(255, 255, 255, 0.55);
	--text-muted: rgba(255, 255, 255, 0.3);
	--border-soft: rgba(255, 255, 255, 0.1);
	--accent: #4e9af1;
	--transition: 0.25s ease;
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { -webkit-text-size-adjust: none; }
ul { list-style: none; padding: 0; }
a { text-decoration: none; color: inherit; }

/* ============ Base ============ */
body {
	background: var(--bg-dark);
	color: var(--text-primary);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
	font-weight: 300;
	font-size: 0.95rem;
	line-height: 1.65;
	margin: 0;
	min-height: 100vh;
}

/* ============ Background ============ */
#bg {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100vh;
	z-index: 0;
	background: linear-gradient(135deg, #1a1a1a 0%, #222 50%, #1a1a1a 100%);
}

/* ============ Container ============ */
.container {
	position: relative;
	z-index: 1;
	max-width: 52rem;
	margin: 0 auto;
	padding: 3rem 2rem;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ============ Page Header ============ */
.page-header {
	text-align: center;
	margin-bottom: 2.5rem;
}
	.back-link {
		display: inline-block;
		font-size: 0.75rem;
		color: var(--text-muted);
		letter-spacing: 0.1rem;
		margin-bottom: 1.2rem;
		transition: color var(--transition);
	}
		.back-link:hover {
			color: var(--text-secondary);
		}
	.page-header h1 {
		font-size: 2rem;
		font-weight: 600;
		letter-spacing: 0.4rem;
		text-transform: uppercase;
		margin-bottom: 0.4rem;
	}
	.page-header .subtitle {
		font-size: 0.85rem;
		color: var(--text-muted);
		letter-spacing: 0.2rem;
	}

/* ============ Tool Grid ============ */
.tool-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.5rem;
	flex: 1;
}

	/* Category Card */
	.tool-category {
		background: var(--bg-card);
		border: 1px solid var(--border-soft);
		border-radius: 8px;
		padding: 1.5rem;
		transition: background var(--transition), border-color var(--transition);
	}
		.tool-category:hover {
			background: var(--bg-card-hover);
			border-color: rgba(255, 255, 255, 0.18);
		}
		.tool-category h2 {
			font-size: 0.8rem;
			font-weight: 600;
			letter-spacing: 0.15rem;
			text-transform: uppercase;
			color: var(--text-secondary);
			margin-bottom: 1rem;
			padding-bottom: 0.6rem;
			border-bottom: 1px solid var(--border-soft);
		}

	/* Tool List */
	.tool-list {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}
		.tool-list a {
			display: block;
			padding: 0.45rem 0.6rem;
			font-size: 0.85rem;
			color: var(--text-secondary);
			border-radius: 4px;
			transition: background var(--transition), color var(--transition), padding-left var(--transition);
		}
			.tool-list a:hover {
				background: rgba(255, 255, 255, 0.06);
				color: var(--text-primary);
				padding-left: 1rem;
			}

/* ============ Footer ============ */
.page-footer {
	margin-top: 3rem;
	text-align: center;
}
	.page-footer .copyright {
		font-size: 0.6rem;
		color: var(--text-muted);
		letter-spacing: 0.2rem;
		text-transform: uppercase;
	}

/* ============ Entry Animation ============ */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
.page-header  { animation: fadeInUp 0.6s ease-out both; animation-delay: 0.1s; }
.tool-category:nth-child(1) { animation: fadeInUp 0.6s ease-out both; animation-delay: 0.15s; }
.tool-category:nth-child(2) { animation: fadeInUp 0.6s ease-out both; animation-delay: 0.2s; }
.tool-category:nth-child(3) { animation: fadeInUp 0.6s ease-out both; animation-delay: 0.25s; }
.tool-category:nth-child(4) { animation: fadeInUp 0.6s ease-out both; animation-delay: 0.3s; }
.tool-category:nth-child(5) { animation: fadeInUp 0.6s ease-out both; animation-delay: 0.35s; }
.tool-category:nth-child(6) { animation: fadeInUp 0.6s ease-out both; animation-delay: 0.4s; }
.page-footer  { animation: fadeInUp 0.6s ease-out both; animation-delay: 0.45s; }

/* ============ Responsive ============ */
@media (max-width: 600px) {
	.container { padding: 2rem 1rem; }
	.page-header h1 { font-size: 1.5rem; }
	.tool-grid { grid-template-columns: 1fr; }
}