.stage{
  position:relative;
  z-index:4;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.panel{
  width:100%;
  max-width:400px;
  padding:40px 36px 28px;
  border-radius:var(--radius);
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:var(--shadow-lg);
  animation:rise .65s cubic-bezier(.16,1,.3,1) both;
}

@keyframes rise{
  from{opacity:0; transform:translateY(18px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
}
.brand-mark{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:11px;
  background:linear-gradient(145deg, rgba(125,211,192,.25), rgba(142,169,255,.15));
  border:1px solid rgba(255,255,255,.12);
  font-size:19px;
  color:var(--accent);
}
.brand-text{display:flex;flex-direction:column;line-height:1.25;}
.brand-text strong{font-size:14.5px;font-weight:600;}
.brand-text span{font-size:11.5px;color:var(--ink-2);letter-spacing:.02em;}

.panel h1{
  margin:6px 0 6px;
  font-size:26px;
  font-weight:700;
  letter-spacing:-.01em;
}
.panel .sub{
  margin:0 0 26px;
  font-size:13.5px;
  color:var(--ink-2);
}

.field{display:block;margin-bottom:16px;}
.field-label{
  display:block;
  font-size:12.5px;
  font-weight:500;
  color:var(--ink-1);
  margin-bottom:7px;
  letter-spacing:.01em;
}

.field input{
  width:100%;
  padding:12px 14px;
  font-size:14px;
  color:var(--ink-0);
  background:var(--glass-2);
  border:1px solid var(--line);
  border-radius:11px;
  outline:none;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
  font-family:inherit;
}
.field input::placeholder{color:var(--ink-2);}
.field input:focus{
  border-color:rgba(125,211,192,.55);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(125,211,192,.12);
}

.pwd-wrap{position:relative;}
.pwd-wrap input{padding-right:42px;}
.pwd-toggle{
  position:absolute;
  right:6px; top:50%;
  transform:translateY(-50%);
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none;
  color:var(--ink-2);
  cursor:pointer;
  border-radius:8px;
  transition:color .2s ease, background .2s ease;
}
.pwd-toggle:hover{color:var(--ink-0); background:rgba(255,255,255,.06);}

.row-between{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin:2px 0 22px;
  font-size:12.5px;
}
.remember{
  display:flex; align-items:center; gap:7px;
  color:var(--ink-1);
  cursor:pointer;
  user-select:none;
}
.remember input{accent-color:var(--accent);}

.submit-btn{
  width:100%;
  padding:12.5px;
  border:none;
  border-radius:11px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#0a0d14;
  font-size:14px;
  font-weight:700;
  letter-spacing:.03em;
  cursor:pointer;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow:0 10px 24px -10px rgba(125,211,192,.5);
}
.submit-btn:hover{filter:brightness(1.05); transform:translateY(-1px);}
.submit-btn:active{transform:translateY(0);}
.submit-btn:disabled{opacity:.75; cursor:default; transform:none;}

.btn-spinner{
  display:none;
  width:15px; height:15px;
  border-radius:50%;
  border:2px solid rgba(10,13,20,.25);
  border-top-color:#0a0d14;
  margin-left:9px;
  animation:spin .7s linear infinite;
}
.submit-btn.loading .btn-spinner{display:inline-block;}
.submit-btn.loading .btn-label{opacity:.85;}
@keyframes spin{to{transform:rotate(360deg);}}

.error-msg{
  min-height:18px;
  margin:14px 0 0;
  font-size:12.5px;
  color:var(--danger);
  text-align:center;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .25s ease, transform .25s ease;
}
.error-msg.show{opacity:1; transform:translateY(0);}

.foot-note{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:11px;
  color:var(--ink-2);
  text-align:center;
  letter-spacing:.01em;
}

@media (max-width:420px){
  .panel{padding:32px 24px 22px;}
}