:root {
  --ayb-red: #ed1c24;
  --ayb-dark-red: #b80000;
  --white: #ffffff;
  --background: #fff7f7;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #f1d5d7;
  --shadow: 0 24px 65px rgba(184, 0, 0, 0.15);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(237, 28, 36, 0.18), transparent 25rem),
    radial-gradient(circle at 90% 90%, rgba(184, 0, 0, 0.13), transparent 25rem),
    var(--background);
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
}

.login-form {
  width: 100%;
  max-width: 460px;
  padding: 48px 40px;
  border: 1px solid rgba(237, 28, 36, 0.12);
  border-top: 6px solid var(--ayb-red);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow);
}

.login-brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 22px;
}

.login-ayb-logo {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  object-fit: cover;
}

.login-brand-divider {
  width: 1px;
  height: 52px;
  background: var(--border);
}

.login-aastmt-mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  padding: 0;
  background: transparent;
}

.login-aastmt-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-form h1 {
  margin-bottom: 10px;
  color: var(--ayb-dark-red);
  font-size: 38px;
  text-align: center;
}

.login-form > p {
  margin-bottom: 30px;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
}

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

.remember-me{display:flex;align-items:center;gap:10px;width:max-content;margin:-4px 0 23px;padding:9px 12px;border:1px solid transparent;border-radius:10px;color:var(--muted);font-size:14px;font-weight:700;cursor:pointer;transition:.2s ease;user-select:none}.remember-me:hover{color:var(--ayb-dark-red);border-color:var(--border);background:#fff7f7}.remember-me input{position:absolute;width:1px;height:1px;opacity:0}.remember-check{position:relative;display:grid;place-items:center;width:20px;height:20px;border:2px solid #d6aeb1;border-radius:6px;background:#fff;transition:.2s ease}.remember-me input:focus-visible+.remember-check{outline:3px solid rgba(237,28,36,.18);outline-offset:2px}.remember-me input:checked+.remember-check{border-color:var(--ayb-red);background:var(--ayb-red);box-shadow:0 4px 10px rgba(237,28,36,.22)}.remember-me input:checked+.remember-check::after{content:"";width:5px;height:9px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #3a2425;
  font-size: 14px;
  font-weight: 700;
}

.form-group input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  color: var(--text);
  background: #fffafa;
  font: inherit;
  transition: 0.25s ease;
}

.form-group input:hover {
  border-color: rgba(237, 28, 36, 0.45);
}

.form-group input:focus {
  border-color: var(--ayb-red);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(237, 28, 36, 0.11);
}

.error-message {
  margin-bottom: 22px;
  padding: 13px 15px;
  border: 1px solid rgba(237, 28, 36, 0.22);
  border-radius: 9px;
  color: var(--ayb-dark-red);
  background: rgba(237, 28, 36, 0.07);
  font-size: 14px;
  text-align: center;
}

.login-form button {
  width: 100%;
  padding: 15px 24px;
  border: 0;
  border-radius: 30px;
  color: var(--white);
  background: linear-gradient(135deg, var(--ayb-red), var(--ayb-dark-red));
  box-shadow: 0 12px 24px rgba(237, 28, 36, 0.24);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.25s ease;
}

.login-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(184, 0, 0, 0.3);
}

.home-link {
  display: block;
  width: fit-content;
  margin: 23px auto 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.home-link:hover {
  color: var(--ayb-red);
}

@media (max-width: 520px) {
  .login-form {
    padding: 38px 22px;
  }

  .login-form h1 {
    font-size: 32px;
  }}