:root { color-scheme: light dark; }
		* { box-sizing: border-box; }
		html, body { height: 100%; margin: 0; }
		body {
			font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
			display: flex; align-items: center; justify-content: center;
			background: #0f1420; color: #e8ecf4; overflow: hidden;
		}

		/* Animated shadebob field sits behind everything. */
		#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

		.card {
			position: relative; z-index: 1;
			width: min(92vw, 380px); background: #1a2130; border: 1px solid #2a3346;
			border-radius: 16px; padding: 32px 28px; text-align: center;
			box-shadow: 0 12px 40px rgba(0,0,0,.5);
		}
		.card img.logo { width: 64px; height: 64px; margin-bottom: 12px; }
		h1 { font-size: 22px; margin: 4px 0 6px; }
		p.sub { font-size: 13px; color: #9aa6bd; margin: 0 0 22px; }
		button.signin {
			width: 100%; height: 48px; border: 0; border-radius: 10px; cursor: pointer;
			font-size: 15px; font-weight: 600; color: #0f1420; background: #62d2c9;
			transition: transform .08s ease, opacity .2s ease;
		}
		button.signin:hover:not(:disabled) { transform: translateY(-1px); }
		button.signin:disabled { opacity: .5; cursor: default; }
		.status { min-height: 18px; margin-top: 16px; font-size: 13px; color: #9aa6bd; }
		.status.error { color: #ff8087; }
		.legal { margin-top: 22px; font-size: 11px; color: #6b7689; line-height: 1.6; }
		.legal .linkbtn {
			background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
			font: inherit; color: #62d2c9;
		}
		.legal .linkbtn:hover { text-decoration: underline; }

		/* Inline scrollable legal popups. */
		.modal {
			position: fixed; inset: 0; z-index: 10;
			display: flex; align-items: center; justify-content: center; padding: 24px;
			background: rgba(6, 9, 15, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
		}
		.modal[hidden] { display: none; }
		.modal-dialog {
			position: relative; width: min(92vw, 640px); max-height: 82vh; overflow-y: auto;
			background: #141a27; border: 1px solid #2a3346; border-radius: 14px;
			padding: 26px 30px 30px; box-shadow: 0 24px 70px rgba(0,0,0,.6);
		}
		.modal-close {
			position: sticky; top: 0; float: right; margin: -6px -8px 0 12px;
			width: 32px; height: 32px; border: 0; border-radius: 8px; cursor: pointer;
			font-size: 20px; line-height: 1; color: #9aa6bd; background: #1e2637;
		}
		.modal-close:hover { color: #e8ecf4; background: #263048; }
		.modal-dialog h2 { font-size: 20px; margin: 0 0 4px; color: #e8ecf4; }
		.modal-dialog .eff { font-size: 12px; color: #6b7689; margin: 0 0 18px; }
		.modal-dialog h3 { font-size: 14px; margin: 20px 0 6px; color: #62d2c9; }
		.modal-dialog p, .modal-dialog li { font-size: 13.5px; line-height: 1.65; color: #c3ccdc; }
		.modal-dialog ul { margin: 6px 0; padding-left: 20px; }
		.modal-hint { margin-top: 22px; text-align: center; font-size: 11px; color: #6b7689; }