*{box-sizing:border-box}

:root{
  --bg:#07070b;
  --card:#111118;
  --field:#181820;
  --line:rgba(255,255,255,.1);
  --line-focus:#8b5cf6;
  --text:#f7f7fb;
  --muted:#9a9aaa;
  --purple:#7c3aed;
  --purple-hover:#6d28d9;
  --danger:#fb7185;
  --success:#34d399;
}

html{
  min-height:100%;
  background:var(--bg);
}

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at top,rgba(124,58,237,.16),transparent 35%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

button,
input{
  font:inherit;
}

.login-page{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    max(20px,env(safe-area-inset-top))
    16px
    max(20px,env(safe-area-inset-bottom));
}

.login-card{
  width:min(100%,400px);
  padding:32px;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(17,17,24,.94);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}

.login-header{
  margin-bottom:28px;
  text-align:center;
}

.login-header img{
  width:64px;
  height:64px;
  display:block;
  margin:0 auto 16px;
  object-fit:contain;
}

.login-header h1{
  margin:0;
  font-size:28px;
  line-height:1.1;
  letter-spacing:-1px;
}

.login-header p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px;
}

label{
  display:block;
  margin-bottom:16px;
}

label>span{
  display:block;
  margin-bottom:8px;
  color:#ddddE7;
  font-size:13px;
  font-weight:700;
}

input{
  width:100%;
  height:54px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--field);
  color:var(--text);
  font-size:16px;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}

input::placeholder{
  color:#70707e;
}

input:focus{
  border-color:var(--line-focus);
  box-shadow:0 0 0 4px rgba(124,58,237,.14);
}

.password-wrap{
  position:relative;
}

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

.password-wrap button{
  position:absolute;
  top:8px;
  right:8px;
  height:38px;
  min-width:58px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#252532;
  color:#fff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.password-wrap button:active{
  transform:scale(.97);
}

.login-message{
  min-height:20px;
  margin:0 0 14px;
  color:var(--danger);
  font-size:13px;
  line-height:1.4;
  text-align:center;
}

.login-message.ok{
  color:var(--success);
}

.login-btn{
  width:100%;
  height:54px;
  border:0;
  border-radius:14px;
  background:var(--purple);
  color:#fff;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 14px 32px rgba(124,58,237,.3);
  transition:background .2s ease,transform .2s ease,opacity .2s ease;
}

.login-btn:hover{
  background:var(--purple-hover);
}

.login-btn:active{
  transform:scale(.99);
}

.login-btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}

.secure-note{
  margin:18px 0 0;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

.shake{
  animation:shake .32s ease;
}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  50%{transform:translateX(6px)}
  75%{transform:translateX(-3px)}
}

@media(max-width:480px){
  .login-page{
    align-items:center;
    padding-left:14px;
    padding-right:14px;
  }

  .login-card{
    padding:26px 20px 22px;
    border-radius:20px;
  }

  .login-header{
    margin-bottom:24px;
  }

  .login-header img{
    width:65px;
    height:65px;
    margin-bottom:14px;
  }

  .login-header h1{
    font-size:26px;
  }

  input,
  .login-btn{
    height:52px;
  }
}

@media(max-width:340px){
  .login-card{
    padding:22px 16px 20px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}