* {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #0b0c10;
  color: #f4f5f7;
}

button,
input {
  font: inherit;
}


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

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

  padding: 24px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,122,24,.08),
      transparent 35%
    ),
    #0b0c10;
}


.login-box {
  width: 100%;
  max-width: 390px;

  padding: 36px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 18px;

  background: #111318;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.35);
}


.brand {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 42px;
}


.brand-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background: #ff7a18;

  color: #17100b;

  font-size: 14px;
  font-weight: 900;
}


.brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .3px;
}


.brand-type {
  margin-top: 2px;

  color: #777e89;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 1.5px;
}


.heading {
  margin-bottom: 30px;
}


.heading h1 {
  margin: 0 0 8px;

  font-size: 27px;
  line-height: 1.15;

  letter-spacing: -1px;
}


.heading p {
  margin: 0;

  color: #808792;

  font-size: 13px;
}


.field {
  margin-bottom: 18px;
}


.field label {
  display: block;

  margin-bottom: 8px;

  color: #b8bdc5;

  font-size: 11px;
  font-weight: 600;
}


.field input {
  width: 100%;
  height: 50px;

  padding: 0 14px;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius: 10px;

  outline: none;

  background: #0d0f13;

  color: #f6f7f8;

  font-size: 13px;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}


.field input:focus {
  border-color:
    rgba(255,122,24,.65);

  box-shadow:
    0 0 0 3px
    rgba(255,122,24,.08);
}


.field input::placeholder {
  color: #525862;
}


.password-wrap {
  position: relative;
}


.password-wrap input {
  padding-right: 62px;
}


.show-password {
  position: absolute;

  top: 50%;
  right: 8px;

  transform:
    translateY(-50%);

  padding: 7px 8px;

  border: 0;

  background: transparent;

  color: #777e89;

  font-size: 10px;

  cursor: pointer;
}


.show-password:hover {
  color: #ff8b35;
}


.error-message {
  min-height: 18px;

  margin:
    -4px 0 10px;

  color: #ff6767;

  font-size: 11px;
}


.login-button {
  width: 100%;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: 0;
  border-radius: 10px;

  background: #ff7a18;

  color: #18100b;

  font-size: 13px;
  font-weight: 800;

  cursor: pointer;

  transition:
    background .15s ease,
    transform .15s ease;
}


.login-button:hover {
  background: #ff8b35;

  transform:
    translateY(-1px);
}


.login-button:disabled {
  opacity: .65;
  cursor: wait;
  transform: none;
}


.spinner {
  width: 15px;
  height: 15px;

  border:
    2px solid rgba(0,0,0,.25);

  border-top-color:
    rgba(0,0,0,.8);

  border-radius: 50%;

  animation:
    spin .7s linear infinite;
}


@keyframes spin {
  to {
    transform:
      rotate(360deg);
  }
}


.footer {
  margin-top: 28px;

  text-align: center;

  color: #555b64;

  font-size: 10px;
}


@media (max-width: 480px) {

  .login-page {
    align-items: flex-start;

    padding:
      70px 18px 30px;
  }

  .login-box {
    padding: 28px 24px;
  }

  .brand {
    margin-bottom: 35px;
  }
}