body {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background-color: #f9f3f3;
			color: #333;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}

		header {
			background-color: #9c6644;
			color: white;
			text-align: center;
			padding: 2rem 0;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		}

		h1 {
			font-size: 2.8rem;
			margin: 0;
			padding: 0;
		}

		.subtitle {
			font-size: 1.4rem;
			margin-top: 0.5rem;
			font-style: italic;
		}

		.container {
			max-width: 600px;
			margin: 0 auto;
			padding: 2rem;
			flex-grow: 1;
		}

		/* Enhanced Social Media Section - Now Primary */
		.social-links-container {
			background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 50%, #feca57 100%);
			border: 3px solid #ff3838;
			border-radius: 20px;
			padding: 2rem;
			margin: 1rem 0 2rem 0;
			text-align: center;
			box-shadow: 0 8px 16px rgba(255, 56, 56, 0.2);
			transform: translateY(-5px);
		}

		.social-title {
			font-size: 1.6rem;
			font-weight: 700;
			color: white;
			margin: 0 0 0.5rem 0;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
		}

		.social-subtitle {
			font-size: 1.1rem;
			color: white;
			margin: 0 0 1.5rem 0;
			font-style: italic;
			opacity: 0.95;
		}

		.social-links {
			display: flex;
			justify-content: center;
			gap: 1.5rem;
			flex-wrap: wrap;
		}

		.social-link {
			display: inline-flex;
			align-items: center;
			gap: 12px;
			padding: 16px 28px;
			border-radius: 12px;
			text-decoration: none;
			font-weight: 600;
			font-size: 1.1rem;
			transition: all 0.3s ease;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			min-width: 140px;
			justify-content: center;
		}

		.social-link.facebook {
			background: linear-gradient(135deg, #1877f2 0%, #166fe5 100%);
			color: white;
		}

		.social-link.facebook:hover {
			background: linear-gradient(135deg, #166fe5 0%, #1464d6 100%);
			transform: translateY(-3px);
			box-shadow: 0 6px 12px rgba(24, 119, 242, 0.4);
			color: white;
			text-decoration: none;
		}

		.social-link.instagram {
			background: linear-gradient(135deg, #e4405f 0%, #c13584 50%, #833ab4 100%);
			color: white;
		}

		.social-link.instagram:hover {
			background: linear-gradient(135deg, #c13584 0%, #833ab4 50%, #5851db 100%);
			transform: translateY(-3px);
			box-shadow: 0 6px 12px rgba(193, 53, 132, 0.4);
			color: white;
			text-decoration: none;
		}

		.social-icon {
			font-size: 1.4rem;
		}

		/* Website Link Section - Secondary */
		.website-link-container {
			background: linear-gradient(135deg, #f8f4f4 0%, #ede7e7 100%);
			border: 2px solid #d4b8a8;
			border-radius: 15px;
			padding: 1.5rem;
			margin: 1.5rem 0;
			text-align: center;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
		}

		.website-link-container:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
		}

		.website-link-content {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 1.5rem;
			flex-wrap: wrap;
		}

		.logo-container {
			flex-shrink: 0;
		}

		.logo-image {
			width: 100px;
			height: 75px;
			object-fit: contain;
			border-radius: 8px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}

		.website-text {
			flex: 1;
			min-width: 200px;
		}

		.website-title {
			font-size: 1.2rem;
			font-weight: 600;
			color: #9c6644;
			margin: 0 0 0.5rem 0;
		}

		.website-subtitle {
			font-size: 0.95rem;
			color: #444;
			margin: 0 0 1rem 0;
			font-style: italic;
		}

		.website-button {
			background: linear-gradient(135deg, #9c6644 0%, #7d5035 100%);
			color: white;
			text-decoration: none;
			padding: 10px 20px;
			border-radius: 8px;
			font-size: 1rem;
			font-weight: 500;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			transition: all 0.3s ease;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		}

		.website-button:hover {
			transform: translateY(-1px);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
			background: linear-gradient(135deg, #7d5035 0%, #6b4129 100%);
			color: white;
			text-decoration: none;
		}

		.website-button::after {
			content: "→";
			font-size: 1.1rem;
			transition: transform 0.3s ease;
		}

		.website-button:hover::after {
			transform: translateX(3px);
		}

		/* Compact Login Section - Tertiary */
		.login-section {
			background-color: white;
			border-radius: 12px;
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
			padding: 1.5rem;
			margin-top: 2rem;
			border: 1px solid #e0e0e0;
		}

		.login-title {
			font-size: 1.3rem;
			color: #9c6644;
			margin: 0 0 1rem 0;
			text-align: center;
			font-weight: 500;
		}

		.compact-login-form {
			display: flex;
			flex-wrap: wrap;
			gap: 1rem;
			align-items: end;
		}

		.form-group-compact {
			flex: 1;
			min-width: 140px;
		}

		.form-group-compact label {
			display: block;
			font-size: 0.9rem;
			margin-bottom: 0.3rem;
			color: #444;
			font-weight: 500;
		}

		.form-group-compact input {
			width: 100%;
			padding: 0.6rem;
			font-size: 0.9rem;
			border: 1px solid #ddd;
			border-radius: 6px;
			box-sizing: border-box;
		}

		.login-button-compact {
			background-color: #9c6644;
			color: white;
			font-size: 0.95rem;
			padding: 0.65rem 1.2rem;
			border: none;
			border-radius: 6px;
			cursor: pointer;
			transition: background-color 0.3s ease;
			white-space: nowrap;
		}

		.login-button-compact:hover {
			background-color: #7d5035;
		}

		.error-message {
			color: #e74c3c;
			font-size: 0.85rem;
			margin-top: 0.5rem;
			display: none;
			text-align: center;
		}

		.register-link {
			text-align: center;
			margin-top: 1rem;
			font-size: 0.9rem;
		}

		.register-link a {
			color: #9c6644;
			text-decoration: none;
		}

		.register-link a:hover {
			text-decoration: underline;
		}

		footer {
			background-color: #9c6644;
			color: white;
			text-align: center;
			padding: 1.5rem 0;
			margin-top: auto;
		}

		.footer-text {
			font-size: 1.2rem;
		}

		/* 2FA Section Styles */
		#twofa-section {
			background-color: white;
			border-radius: 12px;
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
			padding: 1.5rem;
			margin-top: 2rem;
			border: 1px solid #e0e0e0;
			text-align: center;
		}

		.twofa-prompt {
			color: #555;
			font-size: 0.95rem;
			margin: 0 0 1rem 0;
		}

		.twofa-form {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1rem;
		}

		.twofa-input {
			width: 200px;
			padding: 0.75rem;
			font-size: 1.5rem;
			font-family: 'Courier New', Courier, monospace;
			text-align: center;
			letter-spacing: 0.3em;
			border: 2px solid #ddd;
			border-radius: 8px;
			box-sizing: border-box;
		}

		.twofa-input:focus {
			border-color: #9c6644;
			outline: none;
			box-shadow: 0 0 0 3px rgba(156, 102, 68, 0.15);
		}

		.twofa-toggle {
			margin-top: 1rem;
			font-size: 0.85rem;
		}

		.twofa-toggle a {
			color: #9c6644;
			text-decoration: none;
		}

		.twofa-toggle a:hover {
			text-decoration: underline;
		}

		@media (max-width: 768px) {
			h1 {
				font-size: 2.2rem;
			}

			.subtitle {
				font-size: 1.2rem;
			}

			.container {
				padding: 1rem;
			}

			.social-title {
				font-size: 1.4rem;
			}

			.social-subtitle {
				font-size: 1rem;
			}

			.social-links {
				flex-direction: column;
				align-items: center;
				gap: 1rem;
			}

			.social-link {
				width: 200px;
				justify-content: center;
			}

			.website-link-content {
				flex-direction: column;
				gap: 1rem;
			}

			.logo-image {
				width: 80px;
				height: 60px;
			}

			.website-title {
				font-size: 1.1rem;
			}

			.website-subtitle {
				font-size: 0.85rem;
			}

			.compact-login-form {
				flex-direction: column;
			}

			.form-group-compact {
				min-width: unset;
			}

			.login-button-compact {
				width: 100%;
			}
		}