css

/* ------------------------------
  Style of Body
------------------------------ */	
        * {
            box-sizing: border-box;
        }

        body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Microsoft YaHei", sans-serif;

		min-height: 100vh;

		/* REMOVE the centering; use normal document flow */
		display: block;     

		/* The background still fills the whole screen */
		background: linear-gradient(135deg, #f5f7ff, #e3f7ff);
        }
        .card {
		width: 100%;
		max-width: 100%;
		margin: 0;

		display: grid;
		grid-template-columns: 1.2fr 1fr;
		align-items: stretch;      /* make both columns same height */
		
		min-height: 100vh;         /* 🔑 card at least full screen height on desktop */

		background: #ffffff;
		border-radius: 0;          /* optional: remove rounded corners for full-page look */
		box-shadow: none;          /* optional: remove floating card effect */
        }


        .content {
            padding: 24px 24px 28px;
        }

      

        /* Full-width logo banner */
		.logo-banner-wrapper {
			width: 100%;
			background: #ffffff;       /* Clean background */
			margin-bottom: 18px;
			padding: 0;                /* Ensures no cropping */
			text-align: center;        /* Centers the image */
		}

		.logo-banner {
			width: 100%;               /* Let logo fill width as much as possible */
			max-width: 100%;          /* Prevents over-stretching on wide screens */
			height: auto;              /* Keep full logo visible */
			object-fit: contain;       /* NEVER crop the image */
			display: block;
			margin: 0 auto;            /* Center horizontally */
		}

        .tag {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        h1 {
            margin: 0 0 14px;
            font-size: 2rem;
            color: #243b53;
        }

        h2 {
            margin: 0 0 18px;
            font-size: 1.25rem;
            color: #52606d;
        }

        p {
            margin: 0 0 12px;
            color: #4b5563;
            line-height: 1.5;
            font-size: 0.98rem;
        }

        .section-title {
            margin-top: 16px;
            margin-bottom: 8px;
            font-size: 1.05rem;
            font-weight: 600;
            color: #374151;
        }

        .button-row {
            margin-top: 14px;
        }

        .btn {
            display: inline-block;
            padding: 12px 24px;
            border-radius: 999px;
            background: #10b981;
            color: #ffffff;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            border: none;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
            box-shadow: 0 6px 14px rgba(16, 185, 129, 0.35);
        }

        .btn:hover {
            background: #059669;
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(16, 185, 129, 0.4);
        }

        .btn:active {
            transform: translateY(0);
            box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3);
        }

		.image-side {
			position: relative;
			background: url("Background.png") center center / cover no-repeat;
		}


        .image-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.15), rgba(37, 99, 235, 0.35));
        }

        .image-text {
            position: absolute;
            left: 18px;
            bottom: 18px;
            right: 18px;
            color: #f9fafb;
            font-size: 0.9rem;
        }

        .image-text-strong {
            display: block;
            font-weight: 600;
            font-size: 1.05rem;
            margin-bottom: 4px;
        }



/* ------------------------------
   Navigation bar inside the card
------------------------------ */


		.card .content .navbar {
			width: 100%;
			padding: 14px 18px;
			display: flex;
			justify-content: center;      /* center everything inside */
			align-items: center;
			gap: 24px;                    /* space between items */

			background: #ffffffee;
			border-bottom: 1px solid #e5e7eb;

			/* FONT: apply to the whole navbar */
			font-family: "Segoe UI", Arial, sans-serif;
			font-weight: 700;             /* bold */
			font-size: 0.9rem;
			color: #1e40af  /* 🔵 BLUE */
		}

		/* If you are using <a> links inside navbar, style them too */
		.card .content .navbar a {
			font-family: inherit;
			font-weight: inherit;
			font-size: inherit;
			color: inherit;
			text-decoration: none;
			transition: color 0.15s ease;
		}

		.card .content .navbar a:hover {
			color: #1e40af;
		}

	

/* ------------------------------
   MOBILE RESPONSIVENESS
------------------------------ */

		@media (max-width: 768px) {

			body {
				padding: 10px;
			}

			.page {
				max-width: 100%;
				width: 100%;
				margin: 10px auto 24px;
			}

			.card {
				width: 100%;
				max-width: 100%;
				margin: 0;
				border-radius: 14px;
				display: block;  /* stack vertically instead of side-by-side */
			}

			.card .content {
				padding: 16px;
				box-sizing: border-box;
			}

    /* Navbar: 3 items per row, aligned to content width */
			.card .content .navbar {
				display: flex !important;        /* force single row */
				flex-wrap: nowrap !important;    /* do NOT wrap to second line */
				justify-content: flex-start; 
				white-space: nowrap;  

				gap: 6px 10px;
				margin: 0 auto 10px auto;               /* center inside content */
				width: 100%;                             /* ❗ don't force full width */
				padding: 0;                              /* avoid extra horizontal padding */

				font-size: 0.9rem;
				border-bottom: 1px solid #e5e7eb;
				box-sizing: border-box;
			}

			.card .content .navbar a {
				white-space: nowrap;     /* keep each item (incl. 中文) on one line */
				text-align: left;
				display: block;
			}
				
				.card .content .navbar a:hover {
					color: #1e40af;
				}
				
				h1 {
					font-size: 1.4rem;
				}

				h2 {
					font-size: 1rem;
				}

				p {
					font-size: 0.90rem;
					line-height: 1.5;
				}

			.image-side {
				position: relative;
				min-height: 200px;          /* 🔑 ensures the image has space to show */
				height: auto;               /* ignore the 100% from desktop */
				border-top: 1px solid #e5e7eb;  /* optional: nice separator line */
				background: url("Background.png") center center / cover no-repeat;
			}
						
		}


/* ============================= */
/* Account (Sign up / Sign in)   */
/* ============================= */

.account-section {
  margin-top: 24px;
}

.account-title {
  margin-top: 8px;
}

/* Signed-in status text */
.signed-in-as {
  display: none;
  margin-top: 10px;
  color: green;
}

/* Forms */
.account-form {
  margin-top: 12px;
}

.account-form label {
  display: block;
  margin-top: 12px;
  font-weight: 500;
}

.account-form input {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* Divider */
.account-divider {
  margin: 18px 0;
  opacity: 0.3;
}

/* Messages */
.form-msg {
  margin-top: 8px;
  font-size: 14px;
}

/* Reset password */
.reset-link {
  margin-top: 10px;
}

.reset-link a {
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/* Logout button hidden by default */
#logoutBtn {
  display: none;
}


/* Test if the css is loaded.

* {
    outline: 1px solid red;
}

*/