*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:"Inter",sans-serif;
    }
    
    body{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0F172A;
    color:#E2E8F0;
    }
    
    .wrapper{
    width:1200px;
    max-width:95%;
    display:grid;
    grid-template-columns:1fr 420px;
    gap:80px;
    align-items:center;
    }
    
    .left h1{
    font-size:54px;
    font-weight:800;
    line-height:1.1;
    color:#E2E8F0;
    margin-bottom:20px;
    }
    
    .left p{
    color:#94A3B8;
    font-size:17px;
    line-height:1.8;
    max-width:480px;
    }
    
    .mint-line{
    width:70px;
    height:6px;
    border-radius:20px;
    background:#2E86DE;
    margin-bottom:30px;
    }
    
    .card{
    background:#1E293B;
    
      padding:48px 40px 40px;
      
    border-radius:16px;
    border:1px solid #334155;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
    }
    .eye-closed{
      display:none;
      }
    .title{
      font-size:36px;
      font-weight:700;
      margin-bottom:30px;
      text-align:center;
      }
    .subtitle{
    text-align:center;
    color:#94A3B8;
    margin-bottom:40px;
    font-size:14px;
    }
    
    .field{
    margin-bottom:16px;
    position:relative;
    }
    
    .textInput{
    width:100%;
    height:50px;
    border-radius:10px;
    border:1px solid #334155;
    background:#0B1220;
    color:#E2E8F0;
    font-size:14px;
    outline:none;
    transition:.2s;
    padding:0 16px 0 50px;
    }
    
    .textInput::placeholder{
    color:#64748B;
    }
    
    .textInput:focus{
    border-color:#2E86DE;
    box-shadow:0 0 0 2px rgba(20,184,166,.2);
    }
    .inputWrap{
        position:relative;
        width:100%;
      }
      
      .fieldIcon{
        position:absolute;
        left:16px;
        top:50%;
        transform:translateY(-50%);
        width:18px;
        height:18px;
        color:#94A3B8;
        display:flex;
        align-items:center;
        justify-content:center;
        pointer-events:none;
        z-index:2;
      }
      
      .fieldIcon svg{
        width:18px;
        height:18px;
        display:block;
      }
      
      .passwordToggle{
        position:absolute;
        right:16px;
        top:50%;
        transform:translateY(-50%);
        width:20px;
        height:20px;
        border:none;
        background:transparent;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#94A3B8;
        cursor:pointer;
        z-index:2;
        overflow:hidden;
      }
      .eye-open[hidden],
.eye-closed[hidden]{
display:none !important;
}
.loginError{
  font-size:13px;
  color:#FCA5A5;
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.25);
  border-radius:8px;
  padding:8px 10px;
  margin-top:6px;
  margin-bottom:12px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:6px;
  }
  .loginError[hidden]{
    display:none !important;
  }
  .loginError{
    animation:errorFade .2s ease;
    }
    
    @keyframes errorFade{
    from{
    opacity:0;
    transform:translateY(-4px);
    }
    to{
    opacity:1;
    transform:translateY(0);
    }
    }
    .submitBtn{
      font-family:"Inter",sans-serif;
    width:100%;
    height:50px;
    border:none;
    border-radius:10px;
    background:#2E86DE;
    color:white;
    font-weight:700;
    letter-spacing:1px;
    cursor:pointer;
    margin-top:30px;
    transition:.2s;
    display:flex;
align-items:center;
justify-content:center;
gap:8px;
    }
    .submitBtn:active{
      transform:scale(.98);
      }
    .btnLoading{
      font-family:"Inter",sans-serif;
      font-weight:700;
      letter-spacing:1px;
      font-size:14px;
      }
      
      .dots::after{
      content:"";
      animation:dots 1.2s steps(4,end) infinite;
      }
      
      @keyframes dots{
      0%{content:"";}
      25%{content:".";}
      50%{content:"..";}
      75%{content:"...";}
      100%{content:"";}
      }
    .btnText{
      font-family:"Inter",sans-serif;
      font-weight:700;
      letter-spacing:1px;
      font-size:14px;
      }
    .btnSpinner svg{
      width:18px;
      height:18px;
      stroke:white;
      fill:none;
      stroke-linecap:round;
      animation:spin .8s linear infinite;
      }
      
      @keyframes spin{
      from{
      transform:rotate(0deg);
      }
      to{
      transform:rotate(360deg);
      }
      }
    
    .submitBtn:hover{
    background:#1F6FD1;
  
    }
    @keyframes shake{
      0%{transform:translateX(0);}
      20%{transform:translateX(-6px);}
      40%{transform:translateX(6px);}
      60%{transform:translateX(-4px);}
      80%{transform:translateX(4px);}
      100%{transform:translateX(0);}
      }
      
      .shake{
      animation:shake .35s ease;
      }

      .textInput.error{
        border-color:#EF4444;
        box-shadow:0 0 0 2px rgba(239,68,68,.20);
        }
        
        .fieldIcon.error{
        color:#F87171;
        }

    @media(max-width:900px){
    
    .wrapper{
    grid-template-columns:1fr;
    gap:40px;
    text-align:center;
    }
    
    .left p{
    margin:auto;
    }
    
    }