* {
  box-sizing: border-box;
}

body {
  margin: 0;

  font-family:
    Inter,
    "Noto Sans TC",
    "Microsoft JhengHei",
    sans-serif;

  background: #f5f7fb;

  color: #253044;
}


.login-page {
  min-height: 100vh;

  display: flex;

  justify-content: center;
  align-items: center;

  padding: 24px;
}


.login-card {
  width: 100%;
  max-width: 420px;

  background: white;

  padding: 36px;

  border: 1px solid #e3e8f0;

  border-radius: 18px;

  box-shadow:
    0 18px 50px rgba(30, 45, 70, 0.08);
}


.brand {
  margin-bottom: 36px;
}


.brand h1 {
  margin: 0;

  font-size: 24px;
}


.brand p {
  margin: 6px 0 0;

  font-size: 13px;

  color: #8993a5;
}


.login-heading {
  margin-bottom: 28px;
}


.login-heading h2 {
  margin: 0;

  font-size: 21px;
}


.login-heading p {
  margin: 7px 0 0;

  font-size: 13px;

  color: #8590a2;
}


.form-group {
  margin-bottom: 18px;
}


.form-group label {
  display: block;

  margin-bottom: 7px;

  font-size: 13px;

  font-weight: 600;
}


.form-group input {
  width: 100%;

  padding: 12px 13px;

  border: 1px solid #dbe1eb;

  border-radius: 10px;

  font-size: 14px;
}


.form-group input:focus {
  outline: none;

  border-color: #8da3d1;

  box-shadow:
    0 0 0 3px rgba(141, 163, 209, 0.15);
}


.login-button {
  width: 100%;

  margin-top: 6px;

  padding: 12px;

  border: 0;

  border-radius: 10px;

  background: #2e3a54;

  color: white;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;
}


.login-button:disabled {
  opacity: 0.6;

  cursor: not-allowed;
}


.login-message {
  min-height: 22px;

  margin-bottom: 8px;

  font-size: 13px;

  color: #bd3d47;
}