body {
  background: linear-gradient(160deg, #0f0a20 0%, #1c0a3e 45%, #2d0d5a 75%, #3d1070 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* ── Logo ── */
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.75rem;
}
.logo img {
  width: 180px;
  object-fit: contain;
}

/* ── Form box ── */
.login-box {
  width: 100%;
  max-width: 420px;
}
.login-box h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: .4rem;
}
.subtitle {
  color: rgba(255, 255, 255, .6);
  font-size: .9rem;
  margin-bottom: 2rem;
}

/* ── Fields ── */
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255, 255, 255, .45);
  margin-bottom: .4rem;
}
.field input {
  width: 100%;
  padding: .85rem 1rem;
  background: rgba(238, 242, 255, .92);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-size: .95rem;
  font-family: inherit;
  color: #1a1a2e;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input::placeholder { color: #8892b0; }
.field input:focus {
  background: #eef2ff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, .18);
}

/* ── Button ── */
.btn-submit {
  display: block;
  width: 100%;
  margin-top: .85rem;
  padding: .9rem;
  background: var(--primary);
  color: #1a1a1a;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .01em;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-submit:hover  { background: var(--primary-hover); }
.btn-submit:active { transform: scale(.99); }