body {
			background:
				radial-gradient(1200px 520px at 50% -180px, rgba(15,110,115,.16), transparent 72%),
				#f6fafb;
			min-height: 100vh;
		}
		.login-page {
			padding-top: 18px;
			padding-bottom: 24px;
		}
		.login-brand {
			text-align: center;
			margin-bottom: 8px;
		}
		.login-brand img {
			width: 200px;
			height: auto;
		}
		.login-header {
			text-align: center;
			margin-bottom: 12px;
		}
		.login-header-title {
			font-weight: 850;
			font-size: 1.2rem;
			color: var(--m360-navy-900);
		}
		.login-header-sub {
			color: var(--muted);
			font-size: .92rem;
			margin-top: 2px;
		}
		.login-card {
			border: 1px solid var(--border);
			border-radius: 14px;
			box-shadow: var(--shadow-1), var(--shadow-2);
			overflow: hidden;
			background: #fff;
		}
		.login-card + .login-card {
			margin-top: 12px;
		}
		.login-card-head {
			padding: 12px 14px;
			border-bottom: 1px solid var(--divider);
			background: rgba(15,110,115,.035);
		}
		.login-card-title {
			font-weight: 800;
			color: var(--m360-navy-900);
			margin: 0;
		}
		.login-card-sub {
			margin: 2px 0 0;
			color: var(--muted);
			font-size: .88rem;
		}
		.login-card-body {
			padding: 14px;
		}
		.login-actions {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 10px;
		}
		.login-footnote {
			margin-top: 10px;
			font-size: .9rem;
			color: var(--muted);
		}
		.access-code-row {
			display: grid;
			grid-template-columns: 1fr auto 1fr auto 110px;
			gap: 8px;
			align-items: center;
		}
		.access-code-sep {
			text-align: center;
			font-weight: 800;
			color: #6c757d;
		}
		.access-code-hint {
			margin-top: 6px;
			font-size: .8rem;
			color: var(--muted);
		}
		.access-code-hint strong {
			color: var(--m360-navy-700);
		}
		@media (max-width: 520px) {
			.access-code-row {
				grid-template-columns: 1fr;
				gap: 6px;
			}
			.access-code-sep {
				display: none;
			}
		}