*{box-sizing:border-box;margin:0;padding:0}
body{font-family: var(--pe-font-ui), sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.card{background:#fff;border-radius:20px;padding:48px 40px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.logo{text-align:center;margin-bottom:32px}
.logo img{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);padding:12px}
.logo h1{font-size:22px;font-weight:700;color:#2d3748;margin-top:14px}
.logo p{font-size:13px;color:#718096;margin-top:4px}
.form-group{margin-bottom:20px}
label{display:block;font-size:13px;font-weight:600;color:#4a5568;margin-bottom:8px}
input{width:100%;border:2px solid #e2e8f0;border-radius:10px;padding:12px 16px;font-family: var(--pe-font-ui), sans-serif;font-size:14px;color:#2d3748;outline:none;transition:border-color .2s}
input:focus{border-color:#667eea}
.btn{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;padding:14px;font-family: var(--pe-font-ui), sans-serif;font-size:15px;font-weight:700;cursor:pointer;margin-top:8px;transition:opacity .2s}
.btn:hover{opacity:.9}
.btn:disabled{opacity:.6;cursor:not-allowed}
.error-box{background:#fff5f5;border:1px solid #fed7d7;border-radius:8px;padding:12px 16px;color:#c53030;font-size:13px;margin-top:16px;display:none}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-left:8px}
@keyframes spin{to{transform:rotate(360deg)}}

.login-logo-icon{width:72px;height:72px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto}

.back-link{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:12px;padding:8px 16px;border:1px solid #e2e8f0;border-radius:8px;color:#718096;text-decoration:none;font-size:13px;transition:border-color .2s,color .2s}
.back-link:hover{border-color:#667eea;color:#667eea}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  15%      { transform: translateX(-8px); }
  30%      { transform: translateX(8px); }
  45%      { transform: translateX(-6px); }
  60%      { transform: translateX(6px); }
  75%      { transform: translateX(-3px); }
  90%      { transform: translateX(3px); }
}
.shake { animation: shake 0.45s ease; }

.hidden-init { display: none; }
.kb-warn {
  display: block; margin-top: 6px; font-size: 12px;
  color: #b45309; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 6px; padding: 5px 10px;
}
.google-sso-wrap { margin-top: 18px; }
.google-sso-divider { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #a0aec0; font-size: 12px; }
.google-sso-divider::before, .google-sso-divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
#googleSsoBtn { display: flex; justify-content: center; }
.google-sso-btn-wrap { position: relative; width: 320px; max-width: 100%; height: 40px; margin: 0 auto; }
.google-sso-custom-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; border: 1px solid #dadce0; border-radius: 8px; font-family: var(--pe-font-ui), sans-serif; font-size: 14px; font-weight: 600; color: #3c4043; pointer-events: none; }
.google-sso-real-btn { position: absolute; inset: 0; opacity: 0.001; overflow: hidden; }