:root{
  --bg-light: linear-gradient(135deg,#dfeafc,#eaf3ff);
  --bg-dark: linear-gradient(135deg,#111,#1c1c1c);
  --card-light:#fff;
  --card-dark:#2b2b2b;
  --text-1:#222;
  --text-2:#555;
  --text-1-dark:#f2f2f2;
  --text-2-dark:#cfcfcf;
  --primary:#0a66ff;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Segoe UI",Roboto,system-ui,Arial;
  background:var(--bg-light);
  color:var(--text-1);
  transition:background .3s ease, color .3s ease;
}
body.dark{
  background:var(--bg-dark);
  color:var(--text-1-dark);
}

/* Layout */
.auth-wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.auth-card{
  width:min(420px,94vw);
  background:var(--card-light);
  border-radius:18px;
  padding:28px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:background .3s ease, box-shadow .3s ease;
}
body.dark .auth-card{
  background:var(--card-dark);
  box-shadow:0 8px 26px rgba(255,255,255,.05);
}

/* Typography */
h2{margin:0 0 6px;font-size:1.6rem}
.sub{margin:0 0 22px;color:var(--text-2)}
body.dark .sub{color:var(--text-2-dark)}

/* Fields */
.field{margin-bottom:14px}
.field label{display:block;font-size:.88rem;margin-bottom:6px}
.field input{
  width:100%;padding:11px 12px;border-radius:10px;border:1px solid #ccc;
  outline:none;font-size:.95rem;transition:border-color .2s ease, background .2s ease;
}
.field input:focus{border-color:var(--primary)}
body.dark .field input{background:#1a1a1a;border-color:#555;color:#fff}

/* Buttons */
.btn{
  width:100%;padding:11px 12px;border:none;border-radius:10px;cursor:pointer;
  font-weight:600;font-size:.96rem;transition:transform .08s ease, background .2s ease, color .2s ease;
}
.btn:active{transform:scale(.98)}
.primary{background:var(--primary);color:#fff}
.primary:hover{background:#0a58e6}
.secondary{margin-top:8px;background:#333;color:#fff}
.secondary:hover{background:#4a4a4a}

.google{
  margin-top:14px;background:#fff;border:1px solid #dcdcdc;color:#222;display:flex;
  align-items:center;justify-content:center;gap:10px;
}
.google img{width:20px;height:20px}
.google:hover{background:#f2f2f2}
body.dark .google{background:#1a1a1a;border-color:#444;color:#f2f2f2}
body.dark .google:hover{background:#2a2a2a}

/* Divider */
.divider{position:relative;margin:18px 0}
.divider::before,.divider::after{
  content:"";position:absolute;top:50%;width:40%;height:1px;background:#d4d4d4;transform:translateY(-50%)
}
.divider::before{left:0}.divider::after{right:0}
.divider span{display:inline-block;padding:0 10px;color:#999}
body.dark .divider::before,body.dark .divider::after{background:#3f3f3f}
body.dark .divider span{color:#bcbcbc}

/* Links line */
.line{margin-top:14px;display:flex;justify-content:space-between;align-items:center}
.link-btn{background:none;border:none;color:inherit;cursor:pointer;padding:6px 0}
.link{color:var(--primary);text-decoration:none}
.link:hover{text-decoration:underline}

/* Responsiveness */
@media (max-width:420px){
  .auth-card{padding:22px}
}