*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial,sans-serif;
    }

    body{
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background:
      radial-gradient(circle at top left,#1c1c1c,#080808 65%);
      overflow:hidden;
      color:white;
    }

    body::before{
      content:"";
      position:absolute;
      inset:0;
      opacity:.08;
      background:
      linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
      background-size:4px 4px;
      pointer-events:none;
    }

    .auth-box{
      width:430px;
      background:rgba(15,15,15,.96);
      border:1px solid rgba(255,215,120,.12);
      border-radius:26px;
      padding:40px;
      backdrop-filter:blur(14px);
      box-shadow:
      0 0 30px rgba(0,0,0,.5),
      0 0 80px rgba(255,196,0,.05);
    }

    .tabs{
      display:flex;
      position:relative;
      border-bottom:1px solid rgba(255,255,255,.08);
      margin-bottom:45px;
    }

    .tab{
      width:50%;
      padding-bottom:18px;
      text-align:center;
      cursor:pointer;
      color:#777;
      font-size:18px;
      transition:.3s;
      position:relative;
    }

    .tab.active{
      color:white;
    }

    .slider{
      position:absolute;
      bottom:-1px;
      left:0;
      width:50%;
      height:3px;
      border-radius:999px;
      background:linear-gradient(to right,#d5a74f,#f3d57e);
      transition:.35s;
      box-shadow:0 0 12px rgba(255,208,0,.35);
    }

    h1{
      font-size:40px;
      margin-bottom:10px;
    }

    .subtitle{
      color:#8e8e8e;
      margin-bottom:35px;
      font-size:15px;
    }

    .form{
      display:none;
      animation:fade .25s ease;
    }

    .form.active{
      display:block;
    }

    @keyframes fade{
      from{
        opacity:0;
        transform:translateY(10px);
      }
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    .input-group{
      margin-bottom:22px;
    }

    .input-group label{
      display:block;
      margin-bottom:12px;
      color:#d7d7d7;
      font-size:15px;
    }

    .input-group input{
      width:100%;
      height:62px;
      border:none;
      outline:none;
      border-radius:16px;
      padding:0 20px;
      font-size:16px;
      color:white;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      transition:.25s;
    }

    .input-group input:focus{
      border-color:rgba(255,209,92,.8);
      box-shadow:0 0 15px rgba(255,209,92,.15);
    }

    .input-group input::placeholder{
      color:#6c6c6c;
    }

    .bottom-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin:10px 0 30px;
      font-size:14px;
    }

    .remember{
      display:flex;
      align-items:center;
      gap:10px;
      color:#9e9e9e;
    }

    .checkbox{

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

  cursor:pointer;

  user-select:none;

  color:#cfcfcf;

  font-size:15px;
}

/* Прячем стандартный checkbox.
   Потому что браузерные чекбоксы выглядят так,
   будто их рисовали в 2004 на калькуляторе. */

.checkbox input{

  display:none;
}

/* Кастомная коробка */

.custom-checkbox{

  width:24px;
  height:24px;

  border-radius:8px;

  position:relative;

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

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

  transition:.25s;

  flex-shrink:0;
}

/* Hover */

.checkbox:hover .custom-checkbox{

  border-color:
  rgba(255,209,92,.45);

  box-shadow:
  0 0 12px rgba(255,209,92,.08);
}

/* Галочка */

.custom-checkbox::after{

  content:"";

  position:absolute;

  left:7px;
  top:3px;

  width:6px;
  height:12px;

  border:
  solid #151515;

  border-width:
  0 3px 3px 0;

  transform:
  rotate(45deg) scale(0);

  transition:.2s;
}

/* Активный checkbox */

.checkbox input:checked
+ .custom-checkbox{

  background:
  linear-gradient(
    135deg,
    #d3a54b,
    #f2d37b
  );

  border-color:
  transparent;

  box-shadow:
  0 0 18px rgba(255,208,0,.18);
}

/* Показываем галочку */

.checkbox input:checked
+ .custom-checkbox::after{

  transform:
  rotate(45deg) scale(1);
}

/* Текст */

.checkbox-text{

  line-height:1.5;
  color:#9f9f9f;
}

    .remember input{
      accent-color:#d9ad57;
    }

    .forgot{
      text-decoration:none;
      color:#d9ad57;
    }

    .submit-btn{
      width:100%;
      height:64px;
      border:none;
      border-radius:18px;
      cursor:pointer;
      font-size:20px;
      font-weight:700;
      color:#151515;
      background:linear-gradient(135deg,#d3a54b,#f2d37b);
      transition:.25s;
    }

    .submit-btn:hover{
      transform:translateY(-2px);
      box-shadow:0 12px 25px rgba(255,196,0,.18);
    }

    .submit-btn:active{
      transform:scale(.98);
    }

    .error-message{
      margin:12px 0;
      color:#ff6b6b;
      font-size:14px;
    }   

    @media(max-width:500px){

      .auth-box{
        width:92%;
        padding:30px 24px;
      }

      h1{
        font-size:34px;
      }
    }