:root {
  color-scheme: dark;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #f5f8fa;
  background: #071d30;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  align-items: center;
  justify-items: end;
  padding: clamp(1.5rem, 5vw, 5rem);
  background:
    linear-gradient(90deg, rgb(5 24 40 / 5%) 0%, rgb(5 24 40 / 12%) 46%, rgb(5 24 40 / 52%) 100%),
    url("/images/geokal-signin-background.png") center / cover no-repeat fixed;
}

.login-card {
  width: min(24rem, calc(100vw - 3rem));
  padding: clamp(1.6rem, 4vw, 2.25rem);
  border: 1px solid rgb(211 164 88 / 72%);
  border-radius: .8rem;
  background: rgb(7 29 48 / 92%);
  box-shadow: 0 1.25rem 4rem rgb(0 0 0 / 42%);
  backdrop-filter: blur(12px);
}

.login-card img {
  display: block;
  width: 4.25rem;
  height: 4.25rem;
  object-fit: contain;
  margin: 0 auto .8rem;
  padding: .2rem;
  border-radius: .45rem;
  background: rgb(255 255 255 / 92%);
}

h1, p { text-align: center; }
h1 { margin: 0; font-size: 1.8rem; letter-spacing: .01em; }
p { margin: .55rem 0 0; color: #c9d4dc; }

form, label {
  display: grid;
  gap: .45rem;
}

label { color: #f2f5f7; font-weight: 600; }
form { gap: 1rem; margin-top: 1.6rem; }

input, button {
  width: 100%;
  min-height: 2.85rem;
  border-radius: .42rem;
  font: inherit;
}

input {
  border: 1px solid #8fa1ad;
  padding: .6rem .75rem;
  background: rgb(255 255 255 / 96%);
  color: #172027;
}

input:focus {
  outline: 3px solid rgb(218 174 101 / 36%);
  border-color: #ddb16b;
}

button {
  border: 1px solid #e4bd79;
  padding: .65rem 1rem;
  background: linear-gradient(180deg, #d7ad68, #b9853f);
  color: #10283a;
  font-weight: 700;
  cursor: pointer;
}

button:hover { background: linear-gradient(180deg, #e4c081, #c8954f); }

.error {
  padding: .65rem .8rem;
  border: 1px solid #ffadad;
  border-radius: .4rem;
  background: rgb(100 16 23 / 82%);
  color: #ffe2e2;
  font-weight: 600;
}

@media (max-width: 760px) {
  body {
    place-items: center;
    padding: 1.25rem;
    background:
      linear-gradient(rgb(5 24 40 / 58%), rgb(5 24 40 / 68%)),
      url("/images/geokal-signin-background.png") 62% center / cover no-repeat;
  }

  .login-card { width: min(24rem, 100%); }
}

@media (prefers-reduced-transparency: reduce) {
  .login-card { background: #071d30; backdrop-filter: none; }
}