:root{
  --accent:#007AFF;
  --accent-dark:#0060DF;
  --bg:#F5F5F7;
  --card:#FFFFFFCC;
  --text:#1D1D1F;
  --muted:#6E6E73;
  --danger:#FF3B30;
  --success:#34C759;
  --radius:20px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg,#F5F5F7 0%,#E9ECF3 100%);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;
  color:var(--text);
}

.auth-wrapper{
  width:100%;
  max-width:420px;
  padding:24px;
}

.auth-card{
  background:var(--card);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(0,0,0,0.08);
  padding:40px 36px;
  animation:fadeUp .5s ease;
}

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

.brand{
  text-align:center;
  margin-bottom:28px;
}
.brand h1{
  font-size:26px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0;
}
.brand p{
  color:var(--muted);
  font-size:14px;
  margin:4px 0 0;
}

.field{
  position:relative;
  margin-bottom:22px;
}
.field input{
  width:100%;
  padding:16px 14px 8px;
  border-radius:14px;
  border:1px solid #D1D1D6;
  background:#FAFAFC;
  font-size:16px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(0,122,255,0.12);
}
.field label{
  position:absolute;
  left:14px;
  top:14px;
  font-size:16px;
  color:var(--muted);
  pointer-events:none;
  transition:.15s ease all;
  background:transparent;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:4px;
  font-size:11px;
  color:var(--accent);
}
.toggle-pass{
  position:absolute;
  right:14px;
  top:14px;
  cursor:pointer;
  color:var(--muted);
  font-size:13px;
  user-select:none;
}

.strength-meter{
  height:4px;
  border-radius:2px;
  background:#E5E5EA;
  margin-top:8px;
  overflow:hidden;
}
.strength-meter div{
  height:100%;
  width:0%;
  transition:width .25s ease, background .25s ease;
}

.btn-primary{
  width:100%;
  padding:15px;
  border:none;
  border-radius:14px;
  background:var(--accent);
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s, transform .1s;
}
.btn-primary:hover{ background:var(--accent-dark); }
.btn-primary:active{ transform:scale(0.98); }

.aux-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  margin:14px 0 22px;
  color:var(--muted);
}
.aux-row a{ color:var(--accent); text-decoration:none; }

.switch-link{
  text-align:center;
  font-size:14px;
  color:var(--muted);
  margin-top:20px;
}
.switch-link a{ color:var(--accent); text-decoration:none; font-weight:600; }

.alert{
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
  margin-bottom:18px;
}
.alert-danger{ background:#FFEBEA; color:var(--danger); }
.alert-success{ background:#E9F9EE; color:#1C8A3D; }

.error-text{
  color:var(--danger);
  font-size:12px;
  margin-top:6px;
  display:none;
}