:root {
	--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

	--font-size-caption: 0.75rem;
	--font-size-meta: 0.875rem;
	--font-size-body: 1rem;
	--font-size-lead: 1.125rem;
	--font-size-title-sm: 1.25rem;
	--font-size-title-md: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
	--font-size-title-lg: clamp(1.75rem, 1.4rem + 1.6vw, 2.35rem);

	--line-height-tight: 1.2;
	--line-height-snug: 1.35;
	--line-height-body: 1.5;
	--line-height-prose: 1.75;

	--color-canvas: #101114;
	--color-surface: #181a1f;
	--color-surface-raised: #202329;
	--color-text: #f4f5f7;
	--color-text-muted: #a9adb7;
	--color-text-faint: #787e89;
	--color-border: #30343c;
	--color-border-strong: #646a75;
	--color-accent: #f4b23b;
	--color-accent-ink: #17130b;
	--color-accent-soft: #ffd477;
	--color-accent-subtle: rgb(244 178 59 / 12%);
	--color-accent-border: rgb(244 178 59 / 35%);

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;

	--control-height: 2.75rem;
	--radius-control: 0;
	--radius-surface: 0;

	--max-width-container: 58rem;
}

:lang(zh-Hans) {
	--font-ui: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Microsoft YaHei UI", Roboto, "Noto Sans CJK SC", sans-serif;
}

:lang(zh-Hant) {
	--font-ui: "PingFang TC", "Microsoft JhengHei", "Microsoft JhengHei UI", Roboto, "Noto Sans CJK TC", sans-serif;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--color-canvas);
	color: var(--color-text);
	font-family: var(--font-ui);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
}

/* Skip link */
.skip-link {
	position: absolute;
	top: -9999px;
	left: 1rem;
	background: var(--color-accent);
	color: var(--color-accent-ink);
	padding: var(--space-2) var(--space-4);
	font-weight: 700;
	z-index: 100;
	text-decoration: none;
}
.skip-link:focus {
	top: 1rem;
}

/* Page Layout */
.site-wrapper {
	width: 100%;
	max-width: var(--max-width-container);
	margin: 0 auto;
	padding: var(--space-6) var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	flex: 1;
}

@media (min-width: 640px) {
	.site-wrapper {
		padding: var(--space-8) var(--space-6);
		gap: var(--space-8);
	}
}

/* Header */
.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
	gap: var(--space-3);
}

.brand-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.brand-logo {
	height: 32px;
	width: auto;
	display: block;
}

.lang-switch {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	padding: 2px;
}

.lang-btn {
	background: transparent;
	color: var(--color-text-muted);
	border: none;
	font-family: inherit;
	font-size: var(--font-size-caption);
	font-weight: 500;
	padding: 6px 10px;
	cursor: pointer;
	text-decoration: none;
	transition: color 150ms, background-color 150ms;
}

.lang-btn:hover {
	color: var(--color-text);
}

.lang-btn.active {
	background: var(--color-surface-raised);
	color: var(--color-accent);
	font-weight: 600;
}

/* Main Migration Hero Card */
.migration-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-accent);
	padding: var(--space-6) var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-5, 1.25rem);
}

@media (min-width: 640px) {
	.migration-card {
		padding: var(--space-8) var(--space-8);
		gap: var(--space-6);
	}
}

.badge-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.badge-notice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-accent-subtle);
	border: 1px solid var(--color-accent-border);
	color: var(--color-accent);
	font-size: var(--font-size-caption);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	text-transform: uppercase;
}

.badge-notice svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.title-section h1 {
	font-size: var(--font-size-title-lg);
	font-weight: 700;
	line-height: var(--line-height-tight);
	color: var(--color-text);
	margin-bottom: var(--space-2);
}

.title-section p {
	color: var(--color-text-muted);
	font-size: var(--font-size-body);
	line-height: var(--line-height-snug);
}

/* Target Destination URL Block */
.destination-box {
	background: var(--color-canvas);
	border: 1px solid var(--color-border-strong);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.destination-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--font-size-caption);
	color: var(--color-text-faint);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.destination-url-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.destination-url {
	font-family: var(--font-code);
	font-size: var(--font-size-meta);
	color: var(--color-accent-soft);
	word-break: break-all;
	text-decoration: none;
	line-height: 1.4;
}

.destination-url:hover {
	text-decoration: underline;
}

.copy-btn {
	background: var(--color-surface-raised);
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	padding: 6px 10px;
	font-size: var(--font-size-caption);
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: all 150ms;
}

.copy-btn:hover {
	color: var(--color-text);
	border-color: var(--color-border-strong);
}

/* Action Button Group */
.action-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-2);
}

@media (min-width: 480px) {
	.action-group {
		flex-direction: row;
		align-items: stretch;
	}
}

.btn-primary {
	flex: 1;
	height: var(--control-height);
	background: var(--color-accent);
	color: var(--color-accent-ink);
	border: none;
	font-family: inherit;
	font-size: var(--font-size-body);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	text-decoration: none;
	cursor: pointer;
	transition: filter 150ms;
}

.btn-primary:hover {
	filter: brightness(1.1);
}

.btn-primary svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.btn-secondary {
	height: var(--control-height);
	background: var(--color-surface-raised);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	font-family: inherit;
	font-size: var(--font-size-meta);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-5, 1.25rem);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms, border-color 150ms;
}

.btn-secondary:hover {
	background-color: #282c34;
	border-color: var(--color-border-strong);
}

/* Feature/FAQ Grid */
.features-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

@media (min-width: 600px) {
	.features-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.feature-item {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.feature-item h2 {
	font-size: var(--font-size-meta);
	font-weight: 600;
	color: var(--color-accent);
}

.feature-item p {
	font-size: var(--font-size-caption);
	color: var(--color-text-muted);
	line-height: var(--line-height-snug);
}

/* Crawler SEO Explicit Block */
.crawler-notice-section {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	padding: var(--space-5, 1.25rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.crawler-notice-section h2 {
	font-size: var(--font-size-meta);
	font-weight: 700;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: 6px;
}

.crawler-notice-section h2 svg {
	width: 16px;
	height: 16px;
	fill: var(--color-accent);
}

.crawler-prose {
	font-size: var(--font-size-caption);
	color: var(--color-text-muted);
	line-height: var(--line-height-prose);
}

.crawler-prose strong {
	color: var(--color-text);
}

.crawler-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin-top: var(--space-2);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}

.crawler-links a {
	color: var(--color-accent);
	font-size: var(--font-size-caption);
	text-decoration: none;
}

.crawler-links a:hover {
	text-decoration: underline;
}

/* Footer */
.site-footer {
	margin-top: auto;
	border-top: 1px solid var(--color-border);
	padding: var(--space-6) var(--space-4);
	background: var(--color-canvas);
	font-size: var(--font-size-caption);
	color: var(--color-text-faint);
	text-align: center;
}

.footer-inner {
	max-width: var(--max-width-container);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	align-items: center;
}

.footer-inner p a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.footer-inner p a:hover {
	color: var(--color-accent);
}