:root {
	--activation-ink: #1f2a3d;
	--activation-muted: #718096;
	--activation-line: #dfe6ee;
	--activation-orange: #f47b0b;
	--activation-orange-dark: #dd6900;
}

.activation-page {
	min-width: 0;
	margin: 0;
	background:
		radial-gradient(circle at 8% 5%, rgba(244, 123, 11, .11), transparent 26rem),
		radial-gradient(circle at 92% 90%, rgba(33, 76, 125, .10), transparent 30rem),
		#f5f8fb;
	color: var(--activation-ink);
	font-family: Tahoma, "Noto Sans Thai", sans-serif;
}

.activation-shell {
	display: flex;
	box-sizing: border-box;
	min-height: 100vh;
	flex-direction: column;
}

.activation-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	min-height: 74px;
	padding: 0 max(24px, calc((100vw - 1180px) / 2));
	border-bottom: 1px solid rgba(219, 227, 235, .9);
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 1px 0 rgba(26, 43, 63, .02);
	backdrop-filter: blur(10px);
}

.activation-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #14233a;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.02em;
	text-decoration: none;
}

.activation-brand-mark {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 8px;
	background: linear-gradient(135deg, #ff961e, var(--activation-orange));
	box-shadow: 0 6px 14px rgba(244, 123, 11, .22);
	color: #fff;
	font-size: 25px;
	line-height: 1;
}

.activation-login-link {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid #d9e2ec;
	border-radius: 7px;
	background: #fff;
	color: #40526a;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.activation-login-link:hover {
	border-color: #f5b577;
	background: #fff8f1;
	color: var(--activation-orange-dark);
}

.activation-main {
	display: grid;
	flex: 1;
	place-items: center;
	padding: 56px 24px;
}

.activation-card {
	position: relative;
	box-sizing: border-box;
	width: min(100%, 570px);
	padding: 48px 56px 42px;
	border: 1px solid var(--activation-line);
	border-radius: 18px;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 22px 55px rgba(24, 47, 76, .11);
	text-align: center;
	overflow: hidden;
}

.activation-card:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, #f7a04a, var(--activation-orange));
	content: "";
}

.activation-card.is-error:before {
	background: linear-gradient(90deg, #ee9a8c, #d8564b);
}

.activation-icon {
	display: grid;
	width: 68px;
	height: 68px;
	margin: 0 auto 22px;
	place-items: center;
	border-radius: 20px;
	background: #fff1e4;
	color: var(--activation-orange);
}

.activation-card.is-error .activation-icon {
	background: #fff0ef;
	color: #d8564b;
}

.activation-icon svg,
.activation-primary-action svg {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.9;
}

.activation-kicker {
	margin: 0 0 8px;
	color: var(--activation-orange);
	font-size: 13px;
	font-weight: 700;
}

.activation-card.is-error .activation-kicker { color: #c94d43; }

.activation-card h1 {
	margin: 0 0 14px;
	color: #1b293b;
	font-size: 29px;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.35;
}

.activation-message {
	color: #34475f;
	font-size: 15px;
	line-height: 1.75;
}

.activation-message p { margin: 0; }

.activation-hint {
	margin: 14px 0 27px;
	color: var(--activation-muted);
	font-size: 13px;
	line-height: 1.7;
}

.activation-primary-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	border-radius: 8px;
	background: linear-gradient(135deg, #ff941e, var(--activation-orange));
	box-shadow: 0 9px 18px rgba(244, 123, 11, .22);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.activation-primary-action:hover {
	background: linear-gradient(135deg, #f88510, var(--activation-orange-dark));
	color: #fff;
}

.activation-primary-action svg { width: 19px; height: 19px; }

.activation-secondary-action {
	display: inline-block;
	margin-top: 18px;
	color: #62748b;
	font-size: 13px;
	text-decoration: none;
}

.activation-secondary-action:hover { color: var(--activation-orange-dark); text-decoration: underline; }

.activation-footer {
	padding: 22px 24px 26px;
	color: #8794a6;
	font-size: 12px;
	text-align: center;
}

@media (max-width: 600px) {
	.activation-header { min-height: 64px; padding: 0 18px; }
	.activation-brand { font-size: 14px; }
	.activation-brand-mark { width: 30px; height: 30px; font-size: 22px; }
	.activation-login-link { min-height: 34px; padding: 0 11px; }
	.activation-main { padding: 32px 16px; }
	.activation-card { padding: 36px 24px 32px; border-radius: 15px; }
	.activation-card h1 { font-size: 24px; }
	.activation-icon { width: 60px; height: 60px; margin-bottom: 18px; border-radius: 17px; }
}