.shell {
  max-width: 480px;
  margin: 40px auto;
}

.title-row h1 {
  margin: 0;
  font-size: clamp(1.8rem, 2.4vw, 2.3rem);
}

.notice {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(32, 125, 82, 0.35);
  border-radius: 10px;
  background: rgba(216, 246, 231, 0.65);
  color: #1f5f45;
}

.error {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(182, 56, 56, 0.35);
  border-radius: 10px;
  background: rgba(255, 224, 224, 0.58);
  color: #8f2d2d;
}

label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700;
  color: #365a6d;
  display: block;
  margin-bottom: 4px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(22, 59, 80, 0.24);
  background: rgba(255, 255, 255, 0.84);
  color: #143244;
  padding: 10px 12px;
  font-size: 15px;
  margin-bottom: 12px;
}

.submit-wrap {
  margin-top: 16px;
}

button[type="submit"] {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(9, 31, 44, 0.24);
  background: linear-gradient(155deg, #12394f, #0f3042);
  color: #eef7fb;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}

button[type="submit"]:hover {
  filter: brightness(1.04);
}

.login-header-row {
  margin-bottom: 20px;
}

.login-card-title {
  margin: 0 0 16px 0;
}

.sso-card {
  margin-bottom: 12px;
}

.sso-actions {
  display: grid;
  gap: 10px;
}

.sso-btn {
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(22, 59, 80, 0.24);
  background: rgba(255, 255, 255, 0.84);
  color: #143244;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 12px;
  text-align: center;
}

.sso-btn:hover {
  filter: brightness(1.02);
}

.sso-note {
  margin: 10px 0 0 0;
  font-size: 13px;
}

.field-error-inline {
  margin: 4px 0 12px 0;
  padding: 4px 8px;
}

.field-help-text {
  margin: 0 0 12px 0;
  font-size: 13px;
}