:root {
			--bg: #07111f;
			--bg-2: #0c1a2e;
			--panel: rgba(10, 19, 36, 0.76);
			--panel-strong: rgba(12, 24, 44, 0.96);
			--line: rgba(255, 255, 255, 0.08);
			--text: #eef4ff;
			--muted: rgba(238, 244, 255, 0.7);
			--accent: #57d7a8;
			--accent-2: #57a7ff;
			--accent-3: #ffd166;
			--shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
			--radius: 24px;
		}

		* {
			box-sizing: border-box;
		}

		html, body {
			margin: 0;
			min-height: 100%;
			background:
				radial-gradient(circle at top right, rgba(87, 215, 168, 0.18), transparent 30%),
				radial-gradient(circle at top left, rgba(87, 167, 255, 0.18), transparent 28%),
				linear-gradient(160deg, #050b16 0%, var(--bg) 42%, #09182b 100%);
			color: var(--text);
			font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
			overflow-x: hidden;
		}

		html {
			font-size: 15px;
		}

		body::before {
			content: '';
			position: fixed;
			inset: 0;
			background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
			background-size: 20px 20px;
			opacity: 0.22;
			pointer-events: none;
			mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent 92%);
		}

		.loading-screen {
			position: fixed;
			inset: 0;
			z-index: 1000;
			display: grid;
			place-items: center;
			background:
				radial-gradient(circle at center, rgba(87, 167, 255, 0.22), transparent 48%),
				linear-gradient(135deg, #06101c 0%, #050b16 45%, #071728 100%);
			transition: opacity 0.5s ease, visibility 0.5s ease;
			overflow: hidden;
		}

		.loading-screen::before,
		.loading-screen::after {
			content: '';
			position: absolute;
			inset: auto;
			width: 280px;
			height: 280px;
			border-radius: 50%;
			filter: blur(20px);
			opacity: 0.2;
			animation: floatGlow 5s ease-in-out infinite;
			pointer-events: none;
		}

		.loading-screen::before {
			background: rgba(87, 167, 255, 0.35);
			top: -80px;
			right: -70px;
		}

		.loading-screen::after {
			background: rgba(87, 215, 168, 0.35);
			bottom: -90px;
			left: -70px;
			animation-delay: 1.3s;
		}

		.loading-screen.hidden {
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
		}

		.loader-card {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 12px;
			padding: 0;
			background: transparent;
			box-shadow: none;
			border: 0;
			text-align: center;
			transform: translateY(0);
			animation: cardIn 0.8s ease both;
		}

		.loader-brand {
			display: flex;
			align-items: center;
			flex-direction: column;
			gap: 10px;
			margin-bottom: 8px;
			width: 100%;
		}

		.loader-brand img,
		.brand-logo {
			width: 64px;
			height: 64px;
			object-fit: contain;
			border-radius: 18px;
			background: linear-gradient(135deg, rgba(87, 167, 255, 0.18), rgba(87, 215, 168, 0.16));
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 34px rgba(79, 140, 255, 0.18);
			animation: pulseLogo 1.8s ease-in-out infinite;
		}

		.loader-site-name {
			font-size: 1.08rem;
			font-weight: 800;
			letter-spacing: 0.2px;
			line-height: 1.2;
		}

		.loader-title {
			display: block;
			font-size: 1.35rem;
			font-weight: 800;
			letter-spacing: 0.2px;
		}

		.progress-track {
			width: min(72vw, 220px);
			height: 8px;
			overflow: hidden;
			border-radius: 999px;
			background: rgba(255, 255, 255, 0.08);
			border: 1px solid rgba(255, 255, 255, 0.08);
			box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18);
		}

		.progress-fill {
			width: 35%;
			height: 100%;
			border-radius: 999px;
			background: linear-gradient(90deg, var(--accent-2), var(--accent), #8df0cb);
			box-shadow: 0 0 18px rgba(87, 215, 168, 0.28);
			animation: loadingBar 1.6s ease-in-out infinite;
		}

		.dots {
			display: inline-flex;
			gap: 8px;
			margin-top: 18px;
		}

		.dots span {
			width: 9px;
			height: 9px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.65);
			animation: bounce 0.9s infinite ease-in-out;
		}

		.dots span:nth-child(2) { animation-delay: 0.12s; }
		.dots span:nth-child(3) { animation-delay: 0.24s; }

		@keyframes bounce {
			0%, 80%, 100% { transform: translateY(0); opacity: 0.55; }
			40% { transform: translateY(-9px); opacity: 1; }
		}

		@keyframes loadingBar {
			0% { transform: translateX(-55%); }
			50% { transform: translateX(65%); }
			100% { transform: translateX(-55%); }
		}

		@keyframes floatGlow {
			0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
			50% { transform: translate3d(10px, 18px, 0) scale(1.08); }
		}

		@keyframes cardIn {
			0% { opacity: 0; transform: translateY(12px) scale(0.98); }
			100% { opacity: 1; transform: translateY(0) scale(1); }
		}

		@keyframes pulseLogo {
			0%, 100% { transform: scale(1); }
			50% { transform: scale(1.05); }
		}

		.page {
			max-width: 100%;
			margin: 0 auto;
			padding: calc(env(safe-area-inset-top) + 92px) 10px 28px;
		}

		.hero {
			position: relative;
			padding: 20px 0 12px;
		}

		.hero-card {
			position: relative;
			overflow: hidden;
			padding: 12px 8px 20px;
			border: 0;
			border-radius: 0;
			background: transparent;
			box-shadow: none;
			backdrop-filter: none;
		}

		.hero-card::after {
			content: '';
			position: absolute;
			inset: auto -40px -80px auto;
			width: 220px;
			height: 220px;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(87, 215, 168, 0.18), transparent 68%);
			filter: blur(10px);
			pointer-events: none;
		}

		.top-header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 2600;
			display: grid;
			grid-template-columns: 60px minmax(0, 1fr);
			gap: 12px;
			align-items: center;
			width: 100%;
			padding: 10px 14px;
			margin: 0;
			border: 0;
			border-bottom: 1px solid rgba(255, 255, 255, 0.08);
			background: linear-gradient(180deg, rgba(7, 12, 22, 0.98) 0%, rgba(10, 18, 33, 0.97) 100%);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
			border-radius: 0;
			color: #f8fbff;
			opacity: 0;
			visibility: hidden;
			transform: translateY(-10px);
			transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
		}

		.top-header.visible {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		.top-brand-logo {
			width: 60px;
			height: 60px;
			border-radius: 16px;
			object-fit: contain;
			background: linear-gradient(135deg, #8fd4ff 0%, #4f8cff 100%);
			box-shadow: 0 10px 22px rgba(79, 140, 255, 0.22);
		}

		.top-brand-copy {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 6px;
			min-width: 0;
		}

		.top-brand-name {
			margin: 0;
			font-size: 1.08rem;
			font-weight: 800;
			line-height: 1.2;
			color: #f8fbff;
		}

		.top-tagline {
			color: rgba(248, 251, 255, 0.74);
			font-size: 0.82rem;
			line-height: 1.5;
		}

		header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			margin-bottom: 18px;
		}

		.brand {
			display: flex;
			align-items: center;
			gap: 12px;
			min-width: 0;
		}

		.brand-text {
			min-width: 0;
		}

		.brand-text h1 {
			margin: 0;
			font-size: 1.18rem;
			line-height: 1.2;
			font-weight: 800;
		}

		.brand-text p {
			margin: 4px 0 0;
			color: var(--muted);
			font-size: 0.88rem;
		}

		.trust-pill {
			flex: 0 0 auto;
			padding: 8px 12px;
			border-radius: 999px;
			background: rgba(87, 215, 168, 0.12);
			border: 1px solid rgba(87, 215, 168, 0.22);
			color: #bff4df;
			font-size: 0.78rem;
			white-space: nowrap;
		}

		.headline {
			margin: 18px 0 14px;
			font-size: clamp(1.7rem, 5vw, 3.1rem);
			line-height: 1.2;
			letter-spacing: -0.4px;
			font-weight: 800;
		}

		.headline span {
			display: inline-block;
			background: linear-gradient(90deg, #fff 0%, #b7d3ff 50%, #8df0cb 100%);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}

		.intro {
			margin: 0;
			max-width: 58ch;
			color: var(--muted);
			line-height: 1.95;
			font-size: 0.98rem;
		}

		.stats-grid {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 22px auto 0;
			max-width: 760px;
			overflow-x: auto;
			border-radius: 0;
			border: 0;
			background: transparent;
			box-shadow: none;
			padding: 0;
		}

		.stats-table {
			width: auto;
			min-width: auto;
			border-collapse: separate;
			border-spacing: 0 10px;
			margin: 0 auto;
		}

		.stats-table th,
		.stats-table td {
			padding: 0 10px;
			text-align: center;
			vertical-align: middle;
			font-size: 0.86rem;
			border: 0;
		}

		.stats-table td:first-child {
			padding-left: 0;
			color: rgba(238, 244, 255, 0.76);
			font-weight: 600;
			white-space: nowrap;
		}

		.stats-table td:last-child {
			padding-right: 0;
			color: #f4f8ff;
			font-weight: 700;
			white-space: nowrap;
		}

		.stats-table tbody tr:last-child td {
			border-bottom: 0;
		}

		.stat-value,
		.stats-table .value-chip,
		.stats-table .last-update {
			font-size: 0.88rem;
		}

		.live-board {
			margin-top: 18px;
			padding: 18px;
			border-radius: 26px;
			background: var(--panel-strong);
			border: 1px solid var(--line);
			box-shadow: var(--shadow);
		}

		.section-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			margin: 0 0 14px;
			font-size: 1.02rem;
			font-weight: 700;
		}

		.section-title small {
			color: var(--muted);
			font-size: 0.82rem;
			font-weight: 600;
		}

		.live-table {
			width: 100%;
			border-collapse: collapse;
			overflow: hidden;
		}

		.live-table tr + tr td {
			border-top: 1px solid rgba(255, 255, 255, 0.06);
		}

		.live-table td {
			padding: 14px 0;
			vertical-align: top;
		}

		.live-table td:first-child {
			width: 42%;
			color: var(--muted);
			font-size: 0.9rem;
		}

		.live-table td:last-child {
			text-align: left;
			font-size: 0.98rem;
			font-weight: 700;
		}

		.value-chip {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 7px 10px;
			border-radius: 999px;
			background: rgba(87, 167, 255, 0.12);
			color: #dce9ff;
			border: 1px solid rgba(87, 167, 255, 0.18);
			font-size: 0.82rem;
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
		}

		.value-chip strong {
			color: #ffffff;
		}

		.live-chip {
			background: rgba(87, 215, 168, 0.12);
			border-color: rgba(87, 215, 168, 0.24);
			color: #eafbf4;
		}

		.live-dot,
		.server-dot {
			display: inline-block;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: #34d399;
			box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
			animation: pulseDot 1.6s infinite;
		}

		.server-chip {
			background: rgba(52, 211, 153, 0.12);
			border-color: rgba(52, 211, 153, 0.24);
			color: #e3fbef;
		}

		@keyframes pulseDot {
			0% {
				box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
			}
			70% {
				box-shadow: 0 0 0 8px rgba(52, 211, 153, 0);
			}
			100% {
				box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
			}
		}

		.last-update {
			color: #f5fbff;
		}


		.cta-section {
			margin-top: 12px;
			padding: 18px 16px;
			border-radius: 24px;
			background: linear-gradient(140deg, rgba(87, 215, 168, 0.12), rgba(87, 167, 255, 0.08));
			border: 1px solid rgba(255, 255, 255, 0.10);
			box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
			text-align: center;
		}

		.live-notification-panel {
			display: grid;
			gap: 8px;
			margin-top: 14px;
		}

		.live-notification-head {
			font-size: 0.82rem;
			font-weight: 700;
			color: rgba(238, 244, 255, 0.72);
			letter-spacing: 0.2px;
		}

		.live-notification-card {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 10px 12px;
			border-radius: 14px;
			background: rgba(255, 255, 255, 0.06);
			border: 1px solid rgba(255, 255, 255, 0.08);
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
			color: #e2ecff;
			text-align: right;
			animation: fadeInUp 0.45s ease;
		}

		.live-notification-icon {
			display: grid;
			place-items: center;
			width: 36px;
			height: 36px;
			border-radius: 10px;
			background: linear-gradient(135deg, rgba(87, 215, 168, 0.24), rgba(87, 167, 255, 0.24));
			font-size: 1rem;
		}

		.live-notification-body {
			display: grid;
			gap: 2px;
		}

		.live-notification-title {
			font-size: 0.94rem;
			font-weight: 700;
			color: #f8fbff;
		}

		.live-notification-meta {
			font-size: 0.8rem;
			color: rgba(238, 244, 255, 0.72);
		}

		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(6px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes panelIn {
			from {
				opacity: 0;
				transform: translateY(8px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes wizardPrepFill {
			from {
				transform: translateX(-100%);
			}
			to {
				transform: translateX(0);
			}
		}

		.cta-section h2 {
			margin: 0 0 10px;
			font-size: clamp(1.05rem, 4vw, 1.45rem);
		}

		.cta-section p {
			margin: 0 0 16px;
			color: var(--muted);
			line-height: 1.85;
			font-size: 0.9rem;
		}

		.cta-button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			min-width: min(100%, 280px);
			padding: 14px 22px;
			border: 0;
			border-radius: 18px;
			background: linear-gradient(135deg, var(--accent-2), var(--accent));
			color: #04101b;
			font-size: 0.95rem;
			font-weight: 800;
			box-shadow: 0 16px 36px rgba(87, 215, 168, 0.25);
			cursor: pointer;
			text-decoration: none;
			transition: transform 0.2s ease, filter 0.2s ease;
		}

		.cta-button:hover,
		.cta-button:focus-visible {
			transform: translateY(-2px);
			filter: brightness(1.04);
			outline: none;
		}

		.cta-button:active {
			transform: translateY(0);
		}

		.footer-note {
			margin-top: 14px;
			font-size: 0.82rem;
			color: rgba(238, 244, 255, 0.56);
		}

		.button-status {
			margin-top: 12px;
			min-height: 1.2em;
			color: #dff4ff;
			font-size: 0.84rem;
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.button-status.visible {
			opacity: 1;
		}

		.reveal {
			opacity: 0;
			transform: translateY(16px);
			transition: opacity 0.6s ease, transform 0.6s ease;
		}

		.reveal.visible {
			opacity: 1;
			transform: translateY(0);
		}

		.wizard-screen {
			display: none;
			position: fixed;
			inset: 0;
			z-index: 2100;
			padding: calc(env(safe-area-inset-top) + 92px) 14px 24px;
			background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
			color: #0f172a;
			overflow-y: auto;
		}

		.wizard-screen.active {
			display: block;
		}

		.wizard-card {
			width: min(860px, 100%);
			margin: 0 auto;
			padding: 0 0 28px;
			background: transparent;
			color: #0f172a;
			box-shadow: none;
			border: 0;
		}

		.wizard-card-inner {
			display: grid;
			gap: 12px;
			margin-top: 14px;
		}

		.step-progress {
			display: flex;
			justify-content: center;
			gap: 8px;
			margin-bottom: 14px;
		}

		.step-pill {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 34px;
			height: 34px;
			border-radius: 999px;
			background: #e2e8f0;
			color: #64748b;
			font-size: 0.9rem;
			font-weight: 800;
			transition: all 0.2s ease;
		}

		.step-pill.active {
			background: linear-gradient(135deg, #4f8cff, #7dd3fc);
			color: white;
			box-shadow: 0 10px 22px rgba(79, 140, 255, 0.2);
		}

		.wizard-panel {
			display: none;
		}

		.wizard-panel.is-active {
			display: block;
			animation: panelIn 0.35s ease both;
		}

		.premium-card {
			padding: 20px;
			border-radius: 24px;
			background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
			border: 1px solid #e2e8f0;
			box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
		}

		.question-title {
			margin: 0 0 8px;
			font-size: 1.08rem;
			font-weight: 800;
			line-height: 1.7;
		}

		.question-help {
			margin: 0 0 12px;
			font-size: 0.9rem;
			color: #64748b;
		}

		.custom-select {
			position: relative;
			width: 100%;
		}

		.custom-select-trigger {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			padding: 12px 14px;
			border: 1px solid #dbe4f0;
			border-radius: 14px;
			background: #f8fbff;
			color: #0f172a;
			font-size: 0.95rem;
			font-weight: 700;
			cursor: pointer;
		}

		.custom-select-trigger:focus {
			outline: none;
			border-color: #4f8cff;
			box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
		}

		.select-value {
			display: flex;
			align-items: center;
			gap: 10px;
			min-width: 0;
		}

		.select-value .selected-icon {
			width: 34px;
			height: 34px;
			border-radius: 10px;
			background: linear-gradient(135deg, #4f8cff, #7dd3fc);
			display: grid;
			place-items: center;
			color: white;
			font-weight: 800;
			flex-shrink: 0;
		}

		.select-value img {
			width: 34px;
			height: 34px;
			object-fit: cover;
			border-radius: 10px;
		}

		.select-arrow {
			font-size: 0.9rem;
			color: #64748b;
		}

		.custom-select-menu {
			position: absolute;
			left: 0;
			right: 0;
			top: calc(100% + 6px);
			z-index: 10;
			padding: 8px;
			border: 1px solid #e2e8f0;
			border-radius: 14px;
			background: white;
			box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
		}

		.custom-select-option {
			width: 100%;
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 10px 8px;
			border: 0;
			border-radius: 10px;
			background: transparent;
			text-align: right;
			font-size: 0.94rem;
			font-weight: 700;
			color: #0f172a;
			cursor: pointer;
		}

		.custom-select-option:hover,
		.custom-select-option.selected {
			background: #f1f5f9;
		}

		.custom-select-option:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}

		.option-icon {
			width: 34px;
			height: 34px;
			border-radius: 10px;
			background: linear-gradient(135deg, #4f8cff, #7dd3fc);
			display: grid;
			place-items: center;
			color: white;
			font-weight: 800;
			flex-shrink: 0;
		}

		.option-icon img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 10px;
		}

		.option-badge {
			margin-right: auto;
			font-size: 0.95rem;
			font-weight: 800;
			color: #ef4444;
		}

		.answer-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 10px;
			margin-top: 12px;
		}

		.answer-btn {
			padding: 12px 10px;
			border: 1px solid #dbe4f0;
			border-radius: 14px;
			background: #f8fbff;
			font-weight: 700;
			cursor: pointer;
			transition: all 0.2s ease;
		}

		.answer-btn:hover,
		.answer-btn:focus-visible,
		.wizard-btn:hover,
		.wizard-btn:focus-visible,
		.cta-button:hover,
		.cta-button:focus-visible {
			transform: translateY(-1px);
			filter: brightness(1.03);
			outline: none;
		}

		.answer-btn.active {
			border-color: #4f8cff;
			background: #eef6ff;
			color: #2563eb;
		}

		.warning-box {
			margin-top: 12px;
			padding: 12px 14px;
			border-radius: 12px;
			border: 1px solid #fecaca;
			background: #fef2f2;
			color: #b91c1c;
			font-size: 0.9rem;
			font-weight: 700;
			line-height: 1.6;
		}

		.warning-box p {
			margin: 0 0 8px;
		}

		.download-link {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 8px 12px;
			border-radius: 999px;
			background: #0f172a;
			color: #ffffff;
			text-decoration: none;
			font-size: 0.9rem;
			font-weight: 700;
			transition: transform 0.2s ease, opacity 0.2s ease;
		}

		.download-link:hover,
		.download-link:focus-visible {
			transform: translateY(-1px);
			opacity: 0.95;
			outline: none;
		}

		.wizard-actions {
			display: flex;
			justify-content: flex-end;
			margin-top: 16px;
		}

		.wizard-btn {
			border: 0;
			padding: 12px 16px;
			border-radius: 14px;
			background: linear-gradient(135deg, #4f8cff, #7dd3fc);
			color: white;
			font-weight: 800;
			cursor: pointer;
			box-shadow: 0 12px 24px rgba(79, 140, 255, 0.18);
		}

		.wizard-btn:disabled {
			opacity: 0.55;
			cursor: not-allowed;
			box-shadow: none;
		}

		.server-loading-modal {
			position: fixed;
			inset: 0;
			z-index: 2300;
			display: none;
			align-items: center;
			justify-content: center;
			padding: 20px;
			background: rgba(2, 6, 23, 0.66);
			backdrop-filter: blur(8px);
		}

		.server-loading-modal.active {
			display: flex;
		}

		.server-loading-card {
			width: min(380px, 100%);
			padding: 24px 20px;
			border-radius: 24px;
			background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
			text-align: center;
			box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
		}

		.server-loading-spinner {
			width: 48px;
			height: 48px;
			margin: 0 auto 12px;
			border-radius: 50%;
			border: 4px solid #dbeafe;
			border-top-color: #4f8cff;
			animation: spin 0.9s linear infinite;
		}

		.server-loading-progress {
			width: 100%;
			height: 8px;
			margin: 12px 0 14px;
			border-radius: 999px;
			overflow: hidden;
			background: rgba(79, 140, 255, 0.12);
		}

		.server-loading-fill {
			width: 100%;
			height: 100%;
			border-radius: inherit;
			background: linear-gradient(90deg, #4f8cff, #7dd3fc);
			transform: translateX(-100%);
			animation: wizardPrepFill 1.1s ease forwards;
		}

		.server-loading-card h3 {
			margin: 0 0 8px;
			font-size: 1.04rem;
		}

		.server-loading-card p {
			margin: 0;
			color: #64748b;
			line-height: 1.7;
		}

		.stage3-screen {
			display: none;
			position: fixed;
			inset: 0;
			z-index: 2100;
			padding: calc(env(safe-area-inset-top) + 88px) 16px 24px;
			background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
			overflow-y: auto;
		}

		.stage3-screen.active {
			display: block;
		}

		.stage3-card {
			width: min(760px, 100%);
			margin: 0 auto;
			padding: 24px 18px 28px;
			border-radius: 24px;
			background: white;
			border: 1px solid #e2e8f0;
			box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
		}

		.stage3-card h3 {
			margin: 0 0 8px;
			font-size: 1.08rem;
			font-weight: 800;
		}

		.stage3-card p {
			margin: 0 0 16px;
			color: #64748b;
			line-height: 1.8;
		}

		.field-group {
			display: flex;
			flex-direction: column;
			gap: 8px;
			margin-bottom: 14px;
		}

		.field-group span {
			font-size: 0.94rem;
			font-weight: 700;
			color: #334155;
		}

		.field-group input,
		.points-select {
			padding: 12px 14px;
			border: 1px solid #dbe4f0;
			border-radius: 14px;
			background: #f8fbff;
			font-size: 0.95rem;
			font-weight: 700;
			color: #0f172a;
			outline: none;
			font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
			transition: border-color 0.2s ease, box-shadow 0.2s ease;
		}

		.field-group input:focus,
		.points-select:focus {
			border-color: #4f8cff;
			box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
		}

		.stage4-screen {
			display: none;
			position: fixed;
			inset: 0;
			z-index: 2100;
			padding: calc(env(safe-area-inset-top) + 88px) 16px 24px;
			background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
			overflow-y: auto;
		}

		.stage4-screen.active {
			display: block;
		}

		.stage4-card,
		.stage5-card {
			width: min(760px, 100%);
			margin: 0 auto;
			padding: 18px 18px 20px;
			border-radius: 24px;
			background: white;
			border: 1px solid #e2e8f0;
			box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
		}

		.stage4-card h3,
		.stage5-card h3 {
			margin: 0 0 6px;
			font-size: 1.08rem;
			font-weight: 800;
		}

		.stage4-card p,
		.stage5-card p {
			margin: 0 0 10px;
			color: #64748b;
			line-height: 1.7;
		}

		.points-select {
			width: 100%;
			padding: 12px 14px;
			border: 1px solid #dbe4f0;
			border-radius: 14px;
			background: #f8fbff;
			font-size: 0.95rem;
			font-weight: 700;
			color: #0f172a;
			outline: none;
		}

		.points-select:focus {
			border-color: #4f8cff;
			box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
		}

		.stage5-screen {
			display: none;
			position: fixed;
			inset: 0;
			z-index: 2100;
			padding: calc(env(safe-area-inset-top) + 72px) 16px 16px;
			background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
			overflow-y: auto;
		}

		.stage5-screen.active {
			display: block;
		}

		.consent-item {
			display: flex;
			align-items: flex-start;
			gap: 10px;
			margin-bottom: 8px;
			padding: 10px 12px;
			border-radius: 14px;
			background: #f8fbff;
			border: 1px solid #e2e8f0;
		}

		.consent-item input {
			margin-top: 4px;
			accent-color: #4f8cff;
		}

		.consent-item span {
			font-size: 0.94rem;
			line-height: 1.8;
			color: #334155;
		}

		.captcha-box {
			margin-top: 10px;
			padding: 12px;
			border-radius: 14px;
			background: #f8fbff;
			border: 1px solid #e2e8f0;
		}

		[data-captcha-enable="true"] {
			margin-top: 8px;
			min-height: 64px;
			border-radius: 12px;
			overflow: hidden;
		}

		.captcha-box h4 {
			margin: 0 0 6px;
			font-size: 1rem;
		}

		.captcha-box p {
			margin: 0 0 8px;
			font-size: 0.84rem;
			line-height: 1.7;
			color: #dc2626;
			font-weight: 600;
		}

		.captcha-box pre {
			margin: 8px 0 0;
			padding: 10px;
			border-radius: 10px;
			background: #0f172a;
			color: #f8fbff;
			overflow-x: auto;
			font-size: 0.83rem;
			line-height: 1.7;
		}

		.final-success {
			margin-top: 12px;
			padding: 10px 12px;
			border-radius: 12px;
			background: #fef2f2;
			color: #b91c1c;
			font-weight: 700;
			line-height: 1.8;
		}

		@keyframes spin {
			to { transform: rotate(360deg); }
		}

		@media (min-width: 840px) {
			.hero-card {
				padding: 26px;
			}

			.wizard-card {
				padding: 28px 32px 36px;
			}
		}

		@media (max-width: 520px) {
			.top-header {
				grid-template-columns: 60px minmax(0, 1fr);
				gap: 12px;
				padding: 12px 10px;
			}

			.stats-grid {
				overflow-x: hidden;
				border-radius: 0;
				background: transparent;
				box-shadow: none;
			}

			.stats-table {
				min-width: 0;
				width: 100%;
				table-layout: auto;
			}

			.stats-table td {
				padding: 4px 6px;
				font-size: 0.8rem;
				white-space: nowrap;
				word-break: normal;
			}

			.stats-table td:first-child,
			.stats-table td:last-child {
				white-space: nowrap;
			}

			.stat-value,
			.stats-table .value-chip,
			.stats-table .last-update {
				font-size: 0.86rem;
			}

			.trust-pill {
				align-self: flex-start;
			}

			.live-table td:first-child {
				width: 48%;
			}

			.top-brand-name {
				font-size: 1.05rem;
			}

			.top-tagline {
				font-size: 0.8rem;
			}

			.trust-pill {
				font-size: 0.72rem;
				padding: 7px 10px;
			}

			.stat-value,
			.stats-table .value-chip,
			.stats-table .last-update {
				font-size: 0.8rem;
			}
		}