:root {
	--bg: #0f1115;
	--panel: #151822;
	--panel-2: #1b2030;
	--text: #e9eef8;
	--muted: #b6c0d4;

	--theme-color-1: #304fb5;
    --theme-color-2: #0989cf;
    --theme-color-3: #0088b0;
	
	--danger: #ff6b6b;
	--gap: 18px;
	--radius: 14px;
	--dur: 300ms;
	--easing: cubic-bezier(.2, .8, .2, 1);
	--footer-h: 86px;

	--max-content: 1080px;
	--max-form: 700px;
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

html {
	width: 100%;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	width: 100%;
	background: radial-gradient(1200px 800px at 10% -10%, #1a2134 0%, #0f1115 40%, #0f1115 100%);
	background-attachment: fixed;
	color: var(--text);
	padding-bottom: var(--footer-h);
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Ensure media is responsive */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

/* Header */
.app-header {
	text-align: center;
	padding: 24px 12px 10px;
	max-width: var(--max-content);
	margin: 0 auto;
}

.brand-logo {
	display: block;
	width: 180px;
	max-width: 60vw;
	margin: 0 auto 14px;
}

.form-title {
	margin: 0 0 6px 0;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: .3px;
}

/* Start screen */
.start-screen {
	display: flex;
	flex-direction: column;
	/* stack description above button */
	align-items: center;
	gap: 16px;
	padding: 16px 12px 8px;
	max-width: var(--max-form);
	margin: 0 auto;
}

.form-desc {
	margin: 0;
	color: var(--muted);
	text-align: center;
}

/* Start button */
.btn-start {
	font-size: 18px;
	padding: 14px 26px;
	margin-top: 20px;
	min-width: 300px;
}

/* Shell */
.content-wrap {
	max-width: var(--max-form);
	margin: 0 auto;
	padding: 10px 14px 100px;
}

/* Pages container + transitions */
.pages {
	position: relative;
}

.pages.hidden {
	display: none;
}

/* Page fade choreography */
.page {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px) scale(.75);
	pointer-events: none;
	will-change: opacity, transform;
	transition: opacity var(--dur) var(--easing), transform var(--dur) var(--easing);
}

.page.active {
	position: relative;
	/* re-enter normal flow when active */
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.page.entering {
	animation: pageFadeIn var(--dur) var(--easing) both;
}

.page.leaving {
	animation: pageFadeOut var(--dur) var(--easing) both;
}

@keyframes pageFadeIn {
	from {
		opacity: 0;
		transform: translateY(20px) scale(.75);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes pageFadeOut {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	to {
		opacity: 0;
		transform: translateY(-20px) scale(.75);
	}
}

/* Generic fade utility (used for startScreen) */
.fade-in {
	animation: pageFadeIn var(--dur) var(--easing) both;
}

.fade-out {
	animation: pageFadeOut var(--dur) var(--easing) both;
}

/* Card + controls */
.q {
	background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	padding: 18px;
	margin-bottom: var(--gap);
}

.q h3 {
	margin: 0 0 8px 0;
	font-size: 18px;
	font-weight: 700;
}

.q .help {
	color: var(--muted);
	font-size: 13px;
	margin: 6px 0 10px 0;
}

.control {
	display: block;
	width: 100%;
}

.input,
.select,
.textarea {
	width: 100%;
	background: #0f1320;
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--text);
	border-radius: 10px;
	padding: 12px;
	outline: none;
	font-size: 16px;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.input:focus,
.select:focus,
.textarea:focus {
	border-color: var(--theme-color-2);
	box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.25);
}

.textarea {
	min-height: 120px;
	resize: vertical;
}

.choices {
	display: grid;
	gap: 10px;
}

.choice {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #0f1320;
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 12px;
	border-radius: 10px;
}

.req {
	color: #ffadad;
	margin-left: 6px;
	font-weight: 700;
}

/* Error visuals + messages */
.error {
	border-color: var(--danger) !important;
	box-shadow: 0 0 0 3px rgba(255, 107, 107, .25) !important;
}

.choices.error {
	border: 1px solid rgba(255, 107, 107, .9);
	border-radius: 10px;
	padding: 10px;
}

.error-msg {
	color: var(--danger);
	font-size: 13px;
	margin-top: 8px;
}

/* Sticky footer nav */
.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--footer-h);
	background: rgba(16, 18, 26, .92);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(6px);
	z-index: 9999;
}

.footer-inner {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 14px;
	align-items: center;
	padding: 10px 14px;
	max-width: var(--max-content);
	margin: 0 auto;
}

.progress {
	height: 10px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	overflow: hidden;
}

.progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--theme-color-1), var(--theme-color-2), var(--theme-color-3));
	transition: width var(--dur) var(--easing);
}

.progress-text {
	font-size: 12px;
	color: var(--muted);
	text-align: right;
	padding-right: 6px;
}

.nav {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 12px 18px;
	border-radius: 12px;
	font-weight: 700;
	letter-spacing: .3px;
	font-size: 16px;
}

.btn-primary {
	background: linear-gradient(90deg, var(--theme-color-1), var(--theme-color-2), var(--theme-color-3));
	color: #fff;
}

.btn-secondary {
	background: #2a2f43;
	color: #fff;
}

.btn-accent {
	background: linear-gradient(90deg, #03bf6d, #05ffad);
	color: #0b1720;
}

/* Toast */
.toast {
	position: fixed;
	bottom: calc(var(--footer-h) + 14px);
	right: 18px;
	background: #20283c;
	color: var(--text);
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 200ms ease, transform 200ms ease;
	pointer-events: none;
}

.toast.show {
	opacity: 1;
	transform: translateY(0);
}

/* Mobile tweaks */
@media (max-width:560px) {
	.footer-inner {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
	}

	.progress-text {
		justify-self: end;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

	.page,
	.progress-bar,
	.toast {
		transition: none !important;
		animation: none !important;
	}

	.fade-in,
	.fade-out {
		animation: none !important;
	}
}