:root {
  --bg:
    #0b0f14;

  --panel:
    #121820;

  --input:
    #171e27;

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

  --text:
    #f2f5f8;

  --muted:
    #8994a3;

  --accent:
    #ef4b41;

  --accent-hover:
    #f25c52;

  --danger:
    #ff746a;

  --success:
    #43c98f;
}


* {
  box-sizing:
    border-box;
}


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


body {
  margin:
    0;

  background:
    var(--bg);

  color:
    var(--text);

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


button,
input {
  font:
    inherit;
}


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

  min-height:
    100dvh;

  display:
    grid;

  place-items:
    center;

  padding:
    24px;
}


.login-card {
  width:
    min(430px, 100%);

  padding:
    32px;

  background:
    var(--panel);

  border:
    1px solid var(--border);

  border-radius:
    20px;

  box-shadow:
    0 30px 100px
    rgba(0, 0, 0, 0.42);
}


.login-brand {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


.login-brand-icon {
  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  flex:
    0 0 46px;

  border-radius:
    13px;

  background:
    var(--accent);

  color:
    #fff;

  font-size:
    21px;

  font-weight:
    850;

  box-shadow:
    0 8px 24px
    rgba(239, 75, 65, 0.20);
}


.login-brand-copy {
  display:
    flex;

  flex-direction:
    column;
}


.login-brand-copy strong {
  font-size:
    16px;

  line-height:
    1.2;
}


.login-brand-copy span {
  margin-top:
    3px;

  color:
    var(--muted);

  font-size:
    12px;
}


.login-heading {
  margin:
    30px 0 24px;
}


.login-heading h1 {
  margin:
    0;

  font-size:
    27px;

  line-height:
    1.15;
}


.login-heading p {
  margin:
    7px 0 0;

  color:
    var(--muted);

  font-size:
    14px;
}


#loginForm {
  display:
    flex;

  flex-direction:
    column;

  gap:
    17px;
}


.login-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.login-field > span {
  color:
    var(--muted);

  font-size:
    12px;

  font-weight:
    700;
}


.login-field input {
  width:
    100%;

  min-height:
    48px;

  padding:
    0 14px;

  border:
    1px solid var(--border);

  border-radius:
    11px;

  outline:
    none;

  background:
    var(--input);

  color:
    var(--text);

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


.login-field input:focus {
  border-color:
    var(--accent);

  box-shadow:
    0 0 0 3px
    rgba(239, 75, 65, 0.11);
}


.password-field {
  position:
    relative;
}


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


.password-toggle {
  position:
    absolute;

  top:
    50%;

  right:
    8px;

  transform:
    translateY(-50%);

  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    9px;

  background:
    transparent;

  color:
    var(--muted);

  cursor:
    pointer;
}


.password-toggle:hover {
  background:
    rgba(255,255,255,0.05);

  color:
    var(--text);
}


.remember-row {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  cursor:
    pointer;

  user-select:
    none;
}


.remember-row input {
  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


.remember-check {
  width:
    22px;

  height:
    22px;

  flex:
    0 0 22px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--border);

  border-radius:
    7px;

  background:
    var(--input);

  color:
    transparent;

  font-size:
    13px;

  font-weight:
    850;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}


.remember-row
input:checked
+
.remember-check {
  background:
    var(--accent);

  border-color:
    var(--accent);

  color:
    #fff;
}


.remember-copy {
  display:
    flex;

  flex-direction:
    column;
}


.remember-copy strong {
  font-size:
    13px;

  font-weight:
    700;
}


.remember-copy small {
  margin-top:
    2px;

  color:
    var(--muted);

  font-size:
    11px;
}


.login-button {
  width:
    100%;

  min-height:
    50px;

  margin-top:
    4px;

  border:
    0;

  border-radius:
    11px;

  background:
    var(--accent);

  color:
    #fff;

  font-size:
    14px;

  font-weight:
    800;

  cursor:
    pointer;

  box-shadow:
    0 9px 24px
    rgba(239, 75, 65, 0.18);

  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}


.login-button:hover {
  background:
    var(--accent-hover);

  transform:
    translateY(-1px);

  box-shadow:
    0 11px 28px
    rgba(239, 75, 65, 0.24);
}


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


.login-button:disabled {
  opacity:
    0.65;

  cursor:
    wait;

  transform:
    none;
}


.login-message {
  padding:
    11px 13px;

  border-radius:
    9px;

  font-size:
    12px;

  line-height:
    1.4;
}


.login-message.error {
  color:
    var(--danger);

  background:
    rgba(255, 116, 106, 0.08);

  border:
    1px solid
    rgba(255, 116, 106, 0.14);
}


.hidden {
  display:
    none !important;
}


.login-footer {
  margin-top:
    28px;

  padding-top:
    18px;

  border-top:
    1px solid var(--border);

  color:
    var(--muted);

  text-align:
    center;

  font-size:
    10px;
}


@media (max-width: 520px) {

  .login-page {
    align-items:
      center;

    padding:
      18px;
  }


  .login-card {
    padding:
      26px 21px;

    border-radius:
      17px;
  }


  .login-heading {
    margin-top:
      25px;
  }


  .login-heading h1 {
    font-size:
      24px;
  }

}


@media (prefers-color-scheme: light) {

  :root {
    --bg:
      #f4f6f8;

    --panel:
      #ffffff;

    --input:
      #f6f7f9;

    --border:
      rgba(13, 22, 32, 0.10);

    --text:
      #18202a;

    --muted:
      #717d8b;
  }


  .login-card {
    box-shadow:
      0 25px 70px
      rgba(28, 39, 51, 0.10);
  }

}