/* Shared auth screens (login, forgot, 2FA, reset) — redesign 1:1 */
* { box-sizing: border-box; }
		html, body { margin: 0; padding: 0; min-height: 100%; }
		body.auth-page {
			background: #12151a;
			font-family: 'Poppins', Helvetica, Arial, sans-serif;
			/* Kept on purpose: these screens are light-on-dark, where subpixel
			   rendering blooms. The light app chrome deliberately omits it. */
			-webkit-font-smoothing: antialiased;
			color: #e7e9ee;
		}
		body.auth-page a { color: #4ade9b; text-decoration: none; }
		body.auth-page a:hover { color: #6ee7ac; }
		body.auth-page input, body.auth-page button { font-family: inherit; }
		body.auth-page input::placeholder { color: #6b7280; }
		body.auth-page input:focus-visible,
		body.auth-page button:focus-visible {
			outline: 2px solid rgba(15, 157, 100, .45);
			outline-offset: 2px;
		}
		body.auth-page ::selection { background: rgba(15, 157, 100, .3); }

		.auth-shell {
			min-height: 100vh;
			display: grid;
			place-items: center;
			padding: 40px 20px;
			background: radial-gradient(1100px 620px at 50% -10%, #1c2128 0%, #12151a 62%, #0e1116 100%);
		}
		.auth-stack {
			width: 100%;
			max-width: 424px;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 26px;
		}
		.auth-brand {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 14px;
		}
		.auth-brand img {
			display: block;
			width: 208px;
			height: auto;
		}
		.auth-brand-label {
			font-size: 11px;
			font-weight: 700;
			letter-spacing: 0.22em;
			text-transform: uppercase;
			color: #6b7280;
		}
		.auth-card {
			width: 100%;
			background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
			border: 1px solid rgba(255,255,255,.09);
			border-radius: 22px;
			padding: 30px 28px 28px;
			box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
		}
		.auth-card-head {
			display: flex;
			flex-direction: column;
			gap: 5px;
			margin-bottom: 24px;
		}
		.auth-card-head h1 {
			margin: 0;
			font-size: 23px;
			font-weight: 700;
			letter-spacing: -0.02em;
			color: #fff;
		}
		.auth-card-head p {
			margin: 0;
			font-size: 13px;
			color: #8b92a0;
		}
		/* Development-only panel carrying the login code, shown when the mailer
		   cannot deliver. Amber rather than the screen's green so it never reads
		   as part of the product. */
		.auth-devcode {
			display: flex;
			align-items: flex-start;
			gap: 11px;
			margin-bottom: 20px;
			padding: 13px 15px;
			border-radius: 13px;
			border: 1px dashed rgba(234, 179, 8, .45);
			background: rgba(234, 179, 8, .09);
		}
		.auth-devcode .material-symbols-rounded {
			font-size: 19px;
			line-height: 1.25;
			color: #eab308;
		}
		.auth-devcode-body {
			display: flex;
			flex-direction: column;
			gap: 6px;
			min-width: 0;
		}
		.auth-devcode-note {
			font-size: 12px;
			line-height: 1.45;
			color: #d4c08a;
		}
		.auth-devcode-value {
			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
			font-size: 22px;
			font-weight: 600;
			letter-spacing: 0.22em;
			color: #fff;
			user-select: all;
		}

		.auth-fields {
			display: flex;
			flex-direction: column;
			gap: 16px;
		}
		.auth-field {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
		.auth-field-label {
			font-size: 12px;
			font-weight: 600;
			color: #b6bcc8;
		}
		.auth-field-label-row {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 12px;
			font-weight: 600;
			color: #b6bcc8;
		}
		.auth-field-label-row a {
			margin-left: auto;
			font-size: 12px;
			font-weight: 600;
		}
		.auth-input-wrap {
			position: relative;
			display: block;
		}
		.auth-input-icon {
			position: absolute;
			left: 13px;
			top: 50%;
			transform: translateY(-50%);
			font-family: 'Material Symbols Rounded';
			font-size: 19px;
			color: #6b7280;
			line-height: 1;
			pointer-events: none;
		}
		.auth-input {
			width: 100%;
			height: 46px;
			padding: 0 14px 0 42px;
			border-radius: 13px;
			border: 1px solid rgba(255,255,255,.12);
			background: rgba(0,0,0,.28);
			font-size: 14px;
			color: #fff;
		}
		.auth-input--password {
			padding-right: 46px;
		}
		.auth-input:focus {
			outline: none;
			border-color: rgba(15,157,100,.55);
			box-shadow: 0 0 0 3px rgba(15,157,100,.18);
		}
		.auth-pw-toggle {
			position: absolute;
			right: 8px;
			top: 50%;
			transform: translateY(-50%);
			width: 32px;
			height: 32px;
			display: grid;
			place-items: center;
			border-radius: 9px;
			color: #8b92a0;
			cursor: pointer;
			border: 0;
			background: transparent;
			padding: 0;
		}
		.auth-pw-toggle:hover {
			background: rgba(255,255,255,.07);
			color: #fff;
		}
		.auth-pw-toggle .material-symbols-rounded {
			font-size: 19px;
			line-height: 1;
		}
		.auth-remember {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 13px;
			color: #b6bcc8;
			cursor: pointer;
			user-select: none;
		}
		.auth-remember input {
			position: absolute;
			opacity: 0;
			pointer-events: none;
		}
		.auth-remember-box {
			width: 20px;
			height: 20px;
			display: grid;
			place-items: center;
			border-radius: 7px;
			border: 1px solid rgba(255,255,255,.16);
			background: rgba(0,0,0,.28);
			color: #fff;
			flex: 0 0 20px;
		}
		.auth-remember-box .material-symbols-rounded {
			font-size: 15px;
			line-height: 1;
			opacity: 0;
		}
		.auth-remember input:checked + .auth-remember-box {
			background: #0f9d64;
			border-color: #0d8a58;
		}
		.auth-remember input:checked + .auth-remember-box .material-symbols-rounded {
			opacity: 1;
		}
		.auth-submit {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 9px;
			width: 100%;
			height: 48px;
			margin-top: 4px;
			border-radius: 13px;
			border: 1px solid #0d8a58;
			background: #0f9d64;
			color: #fff;
			font-size: 14.5px;
			font-weight: 700;
			cursor: pointer;
			box-shadow: 0 14px 30px -14px rgba(15,157,100,.9);
		}
		.auth-submit:hover {
			background: #12a86c;
		}
		.auth-submit .material-symbols-rounded {
			font-size: 19px;
			line-height: 1;
		}
		.auth-secure {
			display: flex;
			align-items: center;
			gap: 9px;
			margin-top: 4px;
			padding-top: 16px;
			border-top: 1px solid rgba(255,255,255,.07);
			font-size: 11.5px;
			color: #6b7280;
		}
		.auth-secure .material-symbols-rounded {
			font-size: 16px;
			line-height: 1;
			color: #0f9d64;
		}
		.auth-langs {
			display: flex;
			align-items: center;
			gap: 6px;
		}
		.auth-lang {
			display: flex;
			align-items: center;
			gap: 7px;
			height: 34px;
			padding: 0 12px;
			border-radius: 10px;
			border: 1px solid transparent;
			background: transparent;
			font-size: 12.5px;
			font-weight: 600;
			color: #7f8794;
			cursor: pointer;
			text-decoration: none;
		}
		.auth-lang:hover {
			color: #e7e9ee;
		}
		.auth-lang.is-active {
			background: rgba(255,255,255,.08);
			border-color: rgba(255,255,255,.14);
			color: #e7e9ee;
		}
		.auth-lang img {
			width: 16px;
			height: auto;
			display: block;
		}
		.auth-alert {
			width: 100%;
			position: relative;
			padding: 12px 40px 12px 14px;
			margin: 0 0 4px;
			border-radius: 13px;
			background: rgba(217, 83, 79, 0.14);
			border: 1px solid rgba(217, 83, 79, 0.4);
			color: #f6d2d0;
			font-size: 13px;
		}
		.auth-alert.alert-success {
			background: rgba(75, 191, 115, 0.12);
			border-color: rgba(75, 191, 115, 0.35);
			color: #d9f4e5;
		}
		/* These screens deliberately load only auth.css, not Bootstrap, so
		   .btn-close had no icon and no sizing -- it rendered as an empty native
		   button. Drawn here with the Material Symbols face the rest of the
		   screen already uses. */
		.auth-alert-close {
			position: absolute;
			top: 50%;
			right: 8px;
			transform: translateY(-50%);
			width: 28px;
			height: 28px;
			display: grid;
			place-items: center;
			padding: 0;
			border: 0;
			border-radius: 8px;
			background: transparent;
			color: inherit;
			opacity: .6;
			cursor: pointer;
			transition: opacity .15s ease, background .15s ease;
		}
		.auth-alert-close:hover {
			opacity: 1;
			background: rgba(255,255,255,.1);
		}
		.auth-alert-close .material-symbols-rounded {
			font-size: 18px;
			line-height: 1;
		}
		.material-symbols-rounded {
			font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
			user-select: none;
		}
	
		.auth-submit--secondary {
			background: transparent;
			border: 1px solid rgba(255,255,255,.14);
			box-shadow: none;
			color: #e7e9ee;
			font-weight: 600;
		}
		.auth-submit--secondary:hover {
			background: rgba(255,255,255,.06);
			color: #fff;
		}
		.auth-link-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			width: 100%;
			margin-top: 2px;
			padding: 0;
			border: 0;
			background: transparent;
			color: #4ade9b;
			font-size: 13px;
			font-weight: 600;
			cursor: pointer;
			font-family: inherit;
		}
		.auth-link-btn:hover { color: #6ee7ac; }
		.auth-back {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font-size: 12.5px;
			font-weight: 600;
			color: #8b92a0;
		}
		.auth-back:hover { color: #e7e9ee; }
		.auth-back .material-symbols-rounded { font-size: 18px; line-height: 1; }
		.auth-input--code {
			padding-left: 42px;
			letter-spacing: 0.28em;
			font-weight: 600;
			text-align: center;
			font-size: 18px;
		}
		.auth-input--code.with-icon {
			text-align: left;
			letter-spacing: 0.2em;
		}