:root {
  --black: #090a0b;
  --dark: #121416;
  --dark-panel: #1b1e21;

  --silver-dark: #6f767b;
  --silver: #bfc4c7;
  --silver-light: #e5e8e9;
  --chrome: #f7f8f8;

  --text: #f0f2f3;
  --muted: #8e969b;

  --border: rgba(255, 255, 255, 0.12);

  --radius: 18px;

  --shadow:
    0 25px 70px rgba(0, 0, 0, 0.45);

  --metal-gradient:
    linear-gradient(
      135deg,
      #f7f8f8 0%,
      #cdd2d5 22%,
      #858c91 50%,
      #d9dddf 76%,
      #f8f9f9 100%
    );

  --dark-metal-gradient:
    linear-gradient(
      145deg,
      #363c40,
      #1c2023 45%,
      #30363a
    );
}


/* ------------------------------------------------ */
/* RESET */
/* ------------------------------------------------ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

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

  background: var(--black);
  color: var(--text);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ------------------------------------------------ */
/* AUTH PAGE */
/* ------------------------------------------------ */

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

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

  padding: 30px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% -10%,
      #9da4a8 0%,
      #4c5357 23%,
      #202427 48%,
      #08090a 100%
    );

  position: relative;
}


/* metallic light sweep */

.auth-page::before {
  content: "";

  position: fixed;

  width: 80vw;
  height: 200vh;

  top: -50%;
  left: -20%;

  transform: rotate(-20deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.08),
      transparent
    );

  animation: metalSweep 12s linear infinite;

  pointer-events: none;
}


@keyframes metalSweep {

  0% {
    transform:
      translateX(-60%)
      rotate(-20deg);
  }

  100% {
    transform:
      translateX(160%)
      rotate(-20deg);
  }

}


/* ------------------------------------------------ */
/* AUTH CONTAINER */
/* ------------------------------------------------ */

.auth-container {
  width: 100%;
  max-width: 430px;

  position: relative;
  z-index: 2;
}


/* ------------------------------------------------ */
/* AUTH CARD */
/* ------------------------------------------------ */

.auth-card {

  position: relative;

  padding: 42px;

  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      rgba(245,247,248,.98),
      rgba(159,166,170,.98) 52%,
      rgba(232,235,236,.98)
    );

  color: #151719;

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

  box-shadow:
    0 40px 100px rgba(0,0,0,.55),
    inset 1px 1px rgba(255,255,255,.9);

  overflow: hidden;
}


/* glass reflection */

.auth-card::after {

  content: "";

  position: absolute;

  width: 160%;
  height: 40%;

  top: -20%;
  left: -30%;

  transform: rotate(-12deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.28),
      transparent
    );

  animation: cardShine 9s ease-in-out infinite;

  pointer-events: none;
}


@keyframes cardShine {

  0%,
  45% {
    transform:
      translateX(-80%)
      rotate(-12deg);
  }

  70%,
  100% {
    transform:
      translateX(80%)
      rotate(-12deg);
  }

}


/* ------------------------------------------------ */
/* LOGO */
/* ------------------------------------------------ */

.logo {

  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 20px;
  font-weight: 900;

  letter-spacing: -0.04em;

  margin-bottom: 55px;

  position: relative;
  z-index: 2;
}


.logo-symbol {

  font-size: 31px;

  color: #24282b;

  text-shadow:
    0 1px 0 white,
    0 0 15px rgba(255,255,255,.8);
}


/* ------------------------------------------------ */
/* INTRO */
/* ------------------------------------------------ */

.auth-intro {

  position: relative;
  z-index: 2;
}


.eyebrow {

  display: block;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .22em;

  color: #60686d;

  margin-bottom: 10px;
}


.auth-intro h1 {

  margin: 0;

  font-size: 40px;

  line-height: 1;

  letter-spacing: -.055em;
}


.auth-intro p {

  margin: 12px 0 0;

  color: #596166;

  font-size: 13px;
}


/* ------------------------------------------------ */
/* FORM */
/* ------------------------------------------------ */

.auth-form {

  margin-top: 34px;

  position: relative;
  z-index: 2;
}


.input-group {

  margin-bottom: 18px;
}


.input-group label {

  display: block;

  margin-bottom: 8px;

  font-size: 11px;

  font-weight: 800;

  color: #353b3f;
}


.input-group input {

  width: 100%;

  padding: 14px;

  border-radius: 11px;

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

  outline: none;

  background: rgba(255,255,255,.38);

  color: #151719;

  transition: .2s;

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.08);
}


.input-group input::placeholder {
  color: #70787c;
}


.input-group input:focus {

  border-color: rgba(255,255,255,.9);

  background: rgba(255,255,255,.58);

  box-shadow:
    0 0 0 3px rgba(255,255,255,.18),
    inset 0 2px 5px rgba(0,0,0,.06);
}


/* password */

.password-field {
  position: relative;
}


.password-field input {
  padding-right: 50px;
}


.password-toggle {

  position: absolute;

  right: 7px;
  top: 7px;

  width: 36px;
  height: 36px;

  border: 0;

  background: transparent;

  color: #555d61;

  border-radius: 8px;
}


.password-toggle:hover {
  background: rgba(0,0,0,.08);
}


/* ------------------------------------------------ */
/* OPTIONS */
/* ------------------------------------------------ */

.auth-options {

  display: flex;

  justify-content: space-between;
  align-items: center;

  margin: 4px 0 22px;

  font-size: 11px;
}


.auth-options a {
  text-decoration: underline;
}


.remember {

  display: flex;

  align-items: center;

  gap: 7px;
}


/* ------------------------------------------------ */
/* BUTTON */
/* ------------------------------------------------ */

.primary-button {

  width: 100%;

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

  border-radius: 11px;

  padding: 14px;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: .1em;

  color: #151719;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #c4c9cc 50%,
      #ffffff
    );

  box-shadow:
    0 12px 25px rgba(0,0,0,.18),
    inset 1px 1px white;

  transition:
    transform .2s,
    box-shadow .2s;
}


.primary-button:hover {

  transform: translateY(-2px);

  box-shadow:
    0 16px 30px rgba(0,0,0,.24),
    inset 1px 1px white;
}


.primary-button:active {
  transform: translateY(0);
}


/* ------------------------------------------------ */
/* MESSAGE */
/* ------------------------------------------------ */

.form-message {

  min-height: 18px;

  margin-top: 12px;

  text-align: center;

  font-size: 11px;

  color: #515a5f;
}


/* ------------------------------------------------ */
/* FOOTER */
/* ------------------------------------------------ */

.auth-footer {

  position: relative;
  z-index: 2;

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 30px;

  font-size: 9px;

  color: #687075;
}


/* ------------------------------------------------ */
/* RESPONSIVE */
/* ------------------------------------------------ */

@media (max-width: 520px) {

  .auth-page {
    padding: 18px;
  }

  .auth-card {
    padding: 30px 25px;
    border-radius: 22px;
  }

  .logo {
    margin-bottom: 40px;
  }

  .auth-intro h1 {
    font-size: 34px;
  }

}