.auth-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.auth-tabs { display: flex; margin-bottom: 20px; border-bottom: 2px solid #eee; }
.auth-tab { flex: 1; padding: 15px; text-align: center; cursor: pointer; border: none; background: none; font-size: 16px; font-weight: 700; color: #666; transition: all 0.3s ease; }
.auth-tab.active { color: #f00; border-bottom: 2px solid #f00; }
.auth-form { display: none; }
.auth-form.active { display: block; }
.auth-form-title { margin-bottom: 20px; color: #333; text-align: center; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 700; color: #333; }
.form-group input { box-sizing: border-box; width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 5px; font-size: 16px; transition: border-color 0.3s ease; }
.form-group input:focus { outline: none; border-color: #f00; }
.form-help { color: #666; font-size: 12px; }
.auth-btn { width: 100%; padding: 15px; background: #f00; color: white; border: none; border-radius: 5px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background-color 0.3s ease; }
.auth-btn:hover { background: #c00; }
.auth-btn:disabled { background: #ccc; cursor: not-allowed; }
.error-message, .success-message { margin-top: 10px; font-size: 14px; text-align: center; }
.error-message { color: #f00; }
.success-message { color: #28a745; }
.forgot-password, .back-to-home { margin-top: 15px; text-align: center; }
.back-to-home { margin-top: 20px; }
.forgot-password button { padding: 0; color: #f00; border: none; background: none; font: inherit; font-size: 14px; cursor: pointer; }
.forgot-password button:hover { text-decoration: underline; }
.back-to-home a { color: #666; text-decoration: none; font-size: 14px; }
.back-to-home a:hover { color: #f00; }
.loading { display: inline-block; width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50%; border-top-color: transparent; animation: spin 1s ease-in-out infinite; }
.nickname-validation { min-height: 20px; margin-top: 4px; font-size: 13px; }
.nickname-validation[data-state="error"] { color: #f00; }
.nickname-validation[data-state="success"] { color: #28a745; }

@keyframes spin { to { transform: rotate(360deg); } }