body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f4f6f9; margin: 0; }
.login-card { background: white; padding: 2rem; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); width: 300px; }
h2 { text-align: center; margin-top: 0; }
input { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
input:focus { outline: none; border-color: #333; box-shadow: none; }
.login-identity { display: flex; width: 100%; margin-bottom: 10px; }
.login-identity input { flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; border-radius: 4px 0 0 4px; }
.login-identity__suffix { display: flex; flex: 0 0 auto; align-items: center; padding: 0 12px; color: #555; background: #f1f3f5; border: 1px solid #ddd; border-left: 0; border-radius: 0 4px 4px 0; white-space: nowrap; }
.login-identity:focus-within input,
.login-identity:focus-within .login-identity__suffix { border-color: #333; }
button { width: 100%; padding: 10px; background: #333; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #555; }
.error { color: #d00; font-size: 0.9em; margin-bottom: 10px; text-align: center; }
.success { color: #080; font-size: 0.9em; margin-bottom: 10px; text-align: center; }
.links { text-align: center; margin-top: 10px; font-size: 0.9em; }
.links a { color: #333; text-decoration: none; }
.links a:hover { text-decoration: underline; }
.btn-google { background: #db4437; margin-top: 10px; display: block; text-align: center; text-decoration: none; color: white; padding: 10px; border-radius: 4px; font-size: 14px; }
.btn-google:hover { background: #c53929; }