:root {
	--bg: #0b1220;
	--card: #0f1a2b;
	--text: #e6edf3;
	--muted: #9aa7b2;
	--a: #1f6feb;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	background:
		radial-gradient(1200px 600px at 20% -10%, rgba(31, 111, 235, .35), transparent 60%),
		radial-gradient(900px 500px at 90% 0%, rgba(56, 189, 248, .18), transparent 60%),
		var(--bg);
	color: var(--text);
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 28px 18px 56px;
}

.hero {
	padding: 22px 20px;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.hero h1 {
	margin: 0;
	font-size: 34px;
	letter-spacing: -.6px;
}

.hero p {
	margin: 10px 0 0;
	color: var(--muted);
	max-width: 70ch;
	line-height: 1.55;
}

.grid {
	margin-top: 18px;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 14px;
}

.card {
	grid-column: span 6;
	background: var(--card);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 22px;
	padding: 16px 16px 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.card h2 {
	margin: 0 0 10px;
	font-size: 18px;
	letter-spacing: -.2px;
}

.row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 160px;
	flex: 1;
}

label {
	font-size: 12px;
	color: var(--muted);
}

input,
select,
textarea {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .10);
	color: var(--text);
	border-radius: 14px;
	padding: 10px 12px;
	outline: none;
}

textarea {
	min-height: 72px;
	resize: vertical;
}

.btn {
	background: linear-gradient(180deg, rgba(31, 111, 235, 1), rgba(31, 111, 235, .75));
	border: none;
	color: white;
	border-radius: 14px;
	padding: 10px 14px;
	font-weight: 700;
	cursor: pointer;
}

.btn:active {
	transform: translateY(1px);
}

.hint {
	font-size: 12px;
	color: var(--muted);
	margin-top: 8px;
}

.alert {
	margin-top: 14px;
	border-radius: 18px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .05);
}

.alert.ok {
	border-color: rgba(34, 197, 94, .35);
	background: rgba(34, 197, 94, .08);
}

.alert.error {
	border-color: rgba(239, 68, 68, .35);
	background: rgba(239, 68, 68, .08);
}

.footer {
	margin-top: 22px;
	color: var(--muted);
	font-size: 12px;
}

@media (max-width:880px) {
	.card {
		grid-column: span 12
	}

	.hero h1 {
		font-size: 28px
	}

	;
}