body {
			margin: 0;
			overflow: hidden;
			background: #000;
			font-family: 'Segoe UI', system-ui, sans-serif;
			touch-action: manipulation;
		}

		#ui {
			position: absolute;
			top: 16px;
			left: 16px;
			color: #88ddffcc;
			font-size: 13px;
			pointer-events: none;
			z-index: 10;
			user-select: none;
			letter-spacing: 0.5px;
		}

		/* ── Footer ── */
		#footer {
			position: fixed;
			bottom: 12px;
			left: 0;
			right: 0;
			text-align: center;
			color: #88ddff88;
			font-size: 12px;
			font-family: 'Courier New', Courier, monospace;
			letter-spacing: 0.8px;
			text-shadow: 0 0 8px rgba(136, 221, 255, 0.4);
			pointer-events: none;
			z-index: 10;
			opacity: 0.85;
		}

		#footer span {
			color: #99eeff;
			font-weight: 500;
		}

		/* ── Login & Alert shared base ── */
		.glass-overlay {
			position: fixed;
			inset: 0;
			background: rgba(0, 0, 0, 0.01);
			backdrop-filter: blur(12px) saturate(1.8);
			-webkit-backdrop-filter: blur(12px) saturate(1.8);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 100;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.7s ease;
		}

		.glass-overlay.visible {
			opacity: 1;
			pointer-events: auto;
		}

		.glass-box {
			background: rgba(8, 16, 32, 0.18);
			border: 1px solid rgba(136, 221, 255, 0.25);
			border-radius: 16px;
			box-shadow: 0 0 80px rgba(136, 221, 255, 0.18), inset 0 0 100px rgba(0,0,0,0.6);
			padding: 2.6rem 2.2rem;
			width: 100%;
			max-width: 460px;
			color: #d8eaff;
			position: relative;
			overflow: hidden;
			backdrop-filter: blur(10px);
			margin: 0 14px;
		}

		.glass-box::before {
			content: "";
			position: absolute;
			inset: -4px;
			background: linear-gradient(90deg, transparent, rgba(136,221,255,0.12) 50%, transparent);
			animation: scan-glow 5.5s linear infinite;
			pointer-events: none;
		}

		@keyframes scan-glow {
			0%   { transform: translateX(-150%); }
			100% { transform: translateX(150%); }
		}

		.glass-box h2, .glass-box h3 {
			margin: 0 0 2.2rem;
			font-size: 1.8rem;
			color: #99eeff;
			text-shadow: 0 0 18px rgba(136,221,255,0.75);
			text-align: center;
			letter-spacing: 2px;
		}

		.close-btn {
			position: absolute;
			top: 14px;
			right: 18px;
			color: #99eeffcc;
			font-size: 1.7rem;
			cursor: pointer;
			transition: all 0.3s;
		}

		.close-btn:hover {
			color: #bbffff;
			transform: rotate(180deg) scale(1.15);
			text-shadow: 0 0 16px #99eeff;
		}

		/* ── Login specific ── */
		#login-overlay {
			z-index: 100;
		}

		#login-overlay .glass-box {
			max-width: 420px;
		}

		/* ── Alert specific ── */
		#alert-overlay {
			z-index: 250;
		}

		.alert-content p {
			margin: 0 0 2.2rem;
			line-height: 1.55;
			font-size: 1rem;
			text-align: center;
			color: #cce4ff;
		}

		.alert-buttons {
			display: flex;
			justify-content: center;
			gap: 16px;
			flex-wrap: wrap;
		}

		.alert-buttons button {
			padding: 0.9rem 1.6rem;
			font-size: 0.82rem;
			font-weight: 600;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			min-width: 110px;
			transition: all 0.3s;
			box-shadow: 0 0 20px rgba(136,221,255,0.4);
		}

		.alert-buttons button.primary {
			background: linear-gradient(90deg, #1a6699, #3a99cc);
			color: #f0f8ff;
		}

		.alert-buttons button.primary:hover {
			background: linear-gradient(90deg, #3a99cc, #5ccfff);
			box-shadow: 0 0 40px rgba(136,221,255,0.8);
			transform: translateY(-2px);
		}

		.alert-buttons button.secondary,
		.alert-buttons button.cancel {
			background: rgba(40, 60, 90, 0.6);
			color: #cce4ff;
		}

		.alert-buttons button.secondary:hover,
		.alert-buttons button.cancel:hover {
			background: rgba(60, 90, 130, 0.8);
			box-shadow: 0 0 30px rgba(136,221,255,0.5);
		}

		/* ── Form ── */
		.form-group {
			margin-bottom: 1.8rem;
			position: relative;
		}

		.form-group input {
			width: 100%;
			padding: 0.84rem 1.3rem;
			background: rgba(10, 20, 40, 0.45);
			border: 1px solid rgba(136, 221, 255, 0.35);
			border-radius: 10px;
			color: #e8f4ff;
			font-size: 0.85rem;
			transition: all 0.3s;
			font-family: monospace;
			box-sizing: border-box;
		}

		.form-group input:focus {
			outline: none;
			border-color: #99eeff;
			box-shadow: 0 0 20px rgba(136,221,255,0.5);
			background: rgba(15, 35, 65, 0.6);
		}

		.form-group label {
			position: absolute;
			top: 1.1rem;
			left: 1.3rem;
			color: #99eeffaa;
			pointer-events: none;
			transition: all 0.3s ease;
			font-size: .70rem;
		}

		.form-group input:focus + label,
		.form-group input:not(:placeholder-shown) + label {
			top: -0.6rem;
			left: 1.1rem;
			font-size: 0.85rem;
			background: rgba(8, 16, 32, 0.92);
			padding: 0 8px;
			color: #99eeff;
		}

		.code-group {
			position: relative;
		}

		.code-group input {
			padding-right: 7rem;
		}

		.send-btn {
			position: absolute;
			top: 50%;
			right: 0.8rem;
			transform: translateY(-50%);
			padding: 0.6rem 1.2rem;
			font-size: 0.65rem;
			font-weight: 600;
			color: white;
			background: linear-gradient(90deg, #226688, #4488aa);
			border: none;
			border-radius: 8px;
			cursor: pointer;
			box-shadow: 0 0 16px rgba(136,221,255,0.5);
			transition: all 0.25s;
			min-width: 5.5rem;
			text-align: center;
		}

		.send-btn:hover {
			background: linear-gradient(90deg, #4488aa, #66aacc);
			box-shadow: 0 0 24px rgba(136,221,255,0.8);
		}

		.send-btn.sending {
			background: linear-gradient(90deg, #555, #777);
			cursor: default;
			pointer-events: none;
			box-shadow: 0 0 12px rgba(255,255,255,0.3);
		}

		.send-btn.sending::after {
			content: '';
			display: inline-block;
			width: 14px;
			height: 14px;
			margin-left: 8px;
			border: 2px solid #fff;
			border-top-color: transparent;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			vertical-align: middle;
		}

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

		.send-btn.sent {
			background: linear-gradient(90deg, #2a8a2a, #4aaa4a);
			box-shadow: 0 0 20px rgba(100, 255, 100, 0.6);
			animation: success-pulse 1.5s ease-out;
		}

		@keyframes success-pulse {
			0%   { transform: translateY(-50%) scale(1); }
			50%  { transform: translateY(-50%) scale(1.08); }
			100% { transform: translateY(-50%) scale(1); }
		}

		button[type="submit"] {
			width: 100%;
			padding: 1.1rem;
			margin-top: 1.5rem;
			background: linear-gradient(90deg, #1a6699, #3a99cc);
			border: none;
			border-radius: 10px;
			color: #f0f8ff;
			font-size: 0.7rem;
			font-weight: 600;
			cursor: pointer;
			box-shadow: 0 0 28px rgba(136,221,255,0.65);
			transition: all 0.35s;
		}

		button[type="submit"]:hover {
			background: linear-gradient(90deg, #3a99cc, #5ccfff);
			box-shadow: 0 0 56px rgba(136,221,255,0.9);
			transform: translateY(-2px);
		}

		/* ── Status Messages ── */
		#status-message {
			position: fixed;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			pointer-events: none;
			z-index: 200;
			opacity: 0;
			transition: opacity 0.4s ease;
		}

		#status-message.visible {
			opacity: 1;
		}

		.status-inner {
			font-size: 3.8rem;
			font-weight: 900;
			letter-spacing: 6px;
			padding: 1.2rem 3.5rem;
			border-radius: 16px;
			text-shadow: 0 0 40px currentColor;
			transform: scale(0.6);
			opacity: 0;
			transition: all 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		.status-inner.show {
			transform: scale(0.9);
			opacity: 1;
		}

		.granted {
			color: #22ff99;
			background: rgba(34, 255, 153, 0.08);
			border: 2px solid rgba(34, 255, 153, 0.4);
			box-shadow: 0 0 80px rgba(34, 255, 153, 0.7), inset 0 0 60px rgba(34, 255, 153, 0.25);
		}

		.denied {
			color: #ff3366;
			background: rgba(255, 51, 102, 0.08);
			border: 2px solid rgba(255, 51, 102, 0.4);
			box-shadow: 0 0 80px rgba(255, 51, 102, 0.7), inset 0 0 60px rgba(255, 51, 102, 0.25);
		}

		/* ── Toast ── */
		#toast-container {
			position: fixed;
			top: 16px;
			right: 16px;
			z-index: 300;
			display: flex;
			flex-direction: column;
			gap: 10px;
			pointer-events: none;
		}

		.toast {
			background: rgba(12, 18, 35, 0.92);
			border: 1px solid;
			border-radius: 10px;
			padding: 12px 18px;
			color: #e0f0ff;
			font-size: 14px;
			max-width: 380px;
			box-shadow: 0 4px 25px rgba(0,0,0,0.6);
			backdrop-filter: blur(8px);
			opacity: 0;
			transform: translateX(30px);
			transition: all 0.4s ease;
			pointer-events: auto;
		}

		.toast.info    { border-color: #88ddff66; color: #a0e0ff; }
		.toast.success { border-color: #44ff9966; color: #88ffcc; }
		.toast.warning { border-color: #ffcc3366; color: #ffdd88; }
		.toast.error   { border-color: #ff336666; color: #ff8899; }
		.toast.debug   { border-color: #aa88ff66; color: #cc99ff; }