:root {
			--bg: #eef4fb;
			--bg-soft: #dfe9f7;
			--text: #172033;
			--muted: #64748b;
			--line: rgba(116, 138, 170, .22);
			--blue: #2563eb;
			--blue-strong: #0f4fdd;
			--red: #dc2626;
			--panel: rgba(255,255,255,.78);
			--shadow: 0 28px 70px rgba(32, 58, 95, .16);
		}

		* { box-sizing: border-box; }

		body {
			margin: 0;
			min-height: 100vh;
			font-family: "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
			color: var(--text);
			background:
				radial-gradient(circle at 10% 10%, rgba(59,130,246,.18), transparent 28%),
				radial-gradient(circle at 88% 14%, rgba(16,185,129,.12), transparent 24%),
				linear-gradient(145deg, var(--bg) 0%, var(--bg-soft) 100%);
			display: grid;
			place-items: center;
			padding: 24px;
		}

		.shell {
			width: min(460px, 100%);
		}

		.card {
			border: 1px solid rgba(255,255,255,.74);
			border-radius: 28px;
			padding: 24px;
			background: linear-gradient(165deg, rgba(255,255,255,.82), rgba(244,248,255,.7));
			-webkit-backdrop-filter: blur(20px);
			backdrop-filter: blur(20px);
			box-shadow: var(--shadow);
		}

		.eyebrow {
			display: inline-flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 8px;
			padding: 8px 12px;
			border-radius: 999px;
			background: rgba(37,99,235,.1);
			color: var(--blue-strong);
			font-size: .8rem;
			font-weight: 700;
			letter-spacing: .04em;
		}

		.eyebrow svg,
		.button svg {
			width: 18px;
			height: 18px;
			stroke: currentColor;
			fill: none;
			stroke-width: 1.8;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		h1 {
			margin: 16px 0 8px;
			font-size: clamp(1.6rem, 3vw, 2rem);
			letter-spacing: -.03em;
		}

		p {
			margin: 0;
			line-height: 1.55;
			color: var(--muted);
		}

		.form {
			margin-top: 20px;
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		.label {
			display: flex;
			flex-direction: column;
			gap: 6px;
			font-size: .88rem;
			font-weight: 600;
		}

		.input {
			width: 100%;
			border: 1px solid var(--line);
			border-radius: 14px;
			padding: 13px 14px;
			font: inherit;
			background: rgba(255,255,255,.88);
			color: var(--text);
			outline: none;
		}

		.input:focus {
			border-color: rgba(37,99,235,.38);
			box-shadow: 0 0 0 4px rgba(37,99,235,.1);
		}

		.button {
			width: 100%;
			border: none;
			border-radius: 16px;
			min-height: 52px;
			padding: 14px 16px;
			font: inherit;
			font-weight: 700;
			color: #fff;
			background: linear-gradient(180deg, var(--blue), var(--blue-strong));
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
		}

		.button-row {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 10px;
		}

		.button-stack {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.button-secondary {
			color: var(--text);
			background: rgba(255,255,255,.88);
			border: 1px solid var(--line);
		}

		.button:disabled {
			opacity: .7;
			cursor: wait;
		}

		.note,
		.status {
			margin-top: 14px;
			padding: 12px 14px;
			border-radius: 14px;
			font-size: .88rem;
			line-height: 1.45;
		}

		.note {
			background: rgba(37,99,235,.08);
			color: #2851a3;
		}

		.status {
			background: rgba(15,23,42,.05);
			color: var(--muted);
		}

		.status.error {
			background: rgba(220,38,38,.08);
			color: var(--red);
		}

		.hidden { display: none; }

		.meta {
			margin-top: 18px;
			font-size: .8rem;
			color: var(--muted);
			text-align: center;
		}

		#authSubtitle:empty,
		#authNote:empty,
		#authMeta:empty,
		#authStatus:empty {
			display: none;
		}

		@media (max-width: 640px) {
			body {
				padding: 14px;
				align-items: start;
			}

			.shell {
				width: 100%;
				max-width: 100%;
			}

			.card {
				border-radius: 22px;
				padding: 18px;
				box-shadow: 0 18px 44px rgba(32, 58, 95, .14);
			}

			h1 {
				margin: 14px 0 6px;
				font-size: 1.5rem;
			}

			.form {
				margin-top: 18px;
				gap: 10px;
			}

			.label {
				gap: 5px;
				font-size: .84rem;
			}

			.input {
				min-height: 48px;
				padding: 12px 13px;
				border-radius: 13px;
			}

			.button {
				min-height: 48px;
				border-radius: 14px;
				padding: 12px 14px;
			}

			.button-row {
				grid-template-columns: 1fr;
			}

			.note,
			.status {
				margin-top: 12px;
				padding: 11px 12px;
				font-size: .84rem;
			}
		}

		@media (max-width: 380px) {
			body {
				padding: 10px;
			}

			.card {
				padding: 15px;
				border-radius: 18px;
			}

			.eyebrow {
				padding: 7px 10px;
				font-size: .74rem;
			}

			h1 {
				font-size: 1.34rem;
			}
		}

		@media (max-width: 430px) {
			body {
				padding: 12px;
			}

			.card {
				padding: 16px;
				border-radius: 20px;
			}

			.eyebrow {
				padding: 7px 10px;
				font-size: .76rem;
			}

			h1 {
				font-size: 1.42rem;
			}

			.input,
			.button {
				min-height: 50px;
			}

			.note,
			.status,
			.meta {
				font-size: .82rem;
			}
		}