:root{
  --bg:#f1f5f9;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#2563eb;
  --primary-hover:#1d4ed8;
  --border:#e2e8f0;
  --shadow:0 10px 25px rgba(2,6,23,.08), 0 2px 6px rgba(2,6,23,.08);
  --radius:14px;
  --input-h:42px;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial;
  background: radial-gradient(1200px 600px at 80% 0%,#eef2ff 0,#f8fafc 40%,#f1f5f9 100%);
  color:var(--text);
}
.login-wrap{
  min-height:100vh; display:grid; place-items:center; padding:24px;
}
.card{
  width:100%; max-width:520px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 26px;
}
.card h1{
  margin:0 0 16px; font-size:28px; letter-spacing:.3px;
}
.subtitle{ color:var(--muted); margin:0 0 18px; font-size:14px}
.btn{
  height:44px; padding:0 14px; border-radius:10px; border:1px solid var(--border);
  background:#fff; display:flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; cursor:pointer; width:100%;
}
.btn:disabled{opacity:.65; cursor:not-allowed}
.btn-google{ background:#eef2ff; border-color:#dbeafe }
.btn-google:hover{ background:#e0e7ff }
.g{ width:22px; height:22px; display:inline-grid; place-items:center;
    font-weight:800; color:#1f2937; background:#fff; border-radius:5px; }

.sep{ display:flex; align-items:center; gap:12px; margin:18px 0 }
.sep hr{ flex:1; border:none; border-top:1px solid var(--border) }
.sep span{ color:var(--muted); font-size:12px }

label{ display:block; font-size:13px; margin-bottom:6px; color:#0f172a; }
.input{
  height:var(--input-h); width:100%; border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; outline:none; background:#fff; font-size:14px;
}
.input:focus{ border-color:#94a3b8; box-shadow:0 0 0 3px #e2e8f0 }
.row{ display:grid; gap:12px; }
.actions{ display:grid; gap:10px; margin-top:14px; }
.btn-primary{
  background:var(--primary); border-color:transparent; color:#fff; font-weight:700;
}
.btn-primary:hover{ background:var(--primary-hover) }

.inline{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.small{ font-size:13px; color:var(--muted); }
.error{
  background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca; padding:10px 12px;
  border-radius:10px; margin:10px 0 0;
}
.footer{
  margin-top:16px; display:flex; justify-content:space-between; align-items:center;
  color:var(--muted); font-size:12px;
}
a.link{ color:#1d4ed8; text-decoration:none }
a.link:hover{ text-decoration:underline }